/* style.css */

@import url('https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@font-face {
    font-family: times-new-roman;
    src: url("/assets/fonts/times-new-roman.ttf");
}

@font-face {
    font-family: times-new-roman;
    src: url("/assets/fonts/times-new-roman-bold.ttf");
}

body {
    font-family: "Tinos", serif;
    color: #333;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
}

/* fonts */
.fs-9{
    font-size: 9px;
}
.fs-96 {
    font-size: 6rem
}
.fs-76 {
    font-size: 4.75rem
}

.fs-60 {
    font-size: 3.75rem;
}

.fs-36 {
    font-size: 2.25rem;
}

.fs-50 {
    font-size: 3.125rem;
}

.fs-48 {
    font-size: 3rem;
}

.fs-40 {
    font-size: 2.5rem;
}

.fs-30 {
    font-size: 1.875rem;
}

.fs-21 {
    font-size: 1.3125rem;
}

.fs-24 {
    font-size: 1.5rem;
}

.fs-14 {
    font-size: 0.875rem;
}

.fs-16 {
    font-size: 1rem;
}

.fs-15 {
    font-size: 0.9rem;
}

.fs-25 {
    font-size: 1.6rem;
}

.fs-28 {
    font-size: 1.8rem;
}

.fs-32 {
    font-size: 2rem;
}

.fs-36 {
    font-size: 2.25rem;
}

.bg-primary {
    background: #356857;
}

header{
    .active {
        color: #c18a61 !important;
    }
}

.secondory-color {
    color: #c18a61 !important;
}
.bg-secondory-color {
    background-color: #c18a61;
}

.bg-gray {
    background-color: #F8F8F8;
}

.bg-dark {
    background-color: #222;
}

.bg-dark-800 {
    background: #010101;
}

.text-light-white {
    color: rgba(255, 255, 255, 0.67);
}

.text-light-white-gray {
    color: var(--w3, #D6D6D6);
}

.text-dark-gray {
    color: rgba(116, 115, 115, 0.64);
}

.primary-text-color {
    color: #565656;
}

.secondary-text-color {
    color: #282828;
}

.boxShadow{
    box-shadow: 2px 3px 8px 0px rgb(193 174 174 / 92%);
}

/* header {
    font-family: "Roboto", sans-serif;
} */

/* Default state: Transparent header, white text */
#mainHeader {
    /* background-color: transparent; */
    transition: background-color 0.1s ease-in-out;
  }
  
  #mainHeader a {
    color: white;
    transition: color 0.1s ease-in-out;
  }
  
  #mainHeader .logo img {
    transition: all 0.1s ease-in-out;
  }
  
  /* Scrolled state: White background, black text */
  #mainHeader.scrolled {
    background-color: white;
    box-shadow: 2px 3px 8px 0px rgb(193 174 174 / 92%);
  }
  
  #mainHeader.scrolled a {
    color: black;
  }

  #mainHeader.scrolled .transactions a {
    color: white;
  }

  #mainHeader .mobiletransactions a{
    color: #010101;
  }
  
  #mainHeader.scrolled .logo img {
    content: url('../img/logo-black.svg');
  }
  
  .closedbar svg{
    color: #c18a61;
  }


footer ul li {
    line-height: 32px;
}

.times-new-roman {
    font-family: times-new-roman;
}

.times-new-roman-bold {
    font-family: times-new-roman-bold;
}

.bg-grey {
    background-color: #F1F0F5;
}

.bg-white-mlink {
    background-color: #F8F8F8;
}

.light-green {
    color: #356857;
}

.Hit-Grey {
    color: #A9A9A9;
}

.bg-Aqua-Haze {
    background-color: #E2F8EB;
}


.btn-primary {
    display: inline-flex;
    color: #fff;
    padding: var(--Micro-LG, 8px) var(--Related-Elements-LG, 24px);
    border-radius: 4px;
    border: 2px solid var(--w2, #F4F4F4);
    background: rgba(188, 135, 96, 0.50);
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.btn-primary:hover{
    color: #c18a61;
    background-color:transparent;
    border: 2px solid var(--w2, #c18a61);
}
.btn-secondory {
    display: inline-flex;
    color: var(--b3, #565656);
    padding: var(--Micro-LG, 8px) var(--Related-Elements-LG, 24px);
    border-radius: 4px;
    border: 2px solid var(--b3, #565656);
    background: #BC876080;
    font-weight: bold;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.btn-secondory:hover{
    color: #c18a61;
    border: 2px solid var(--w2, #c18a61);
    background-color:transparent;
}
.btn-light {
    display: inline-flex;
    color: #707070;
    ;
    padding: var(--Micro-LG, 8px) var(--Related-Elements-LG, 24px);
    border-radius: 8px;
    background: #FFF;
    font-weight: bold;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.btn-light:hover{
    color: #c18a61;
}
.what-we-do .card {
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.what-we-do .card .line {
    background: #356857;
    width: 5px;
}

.what-we-do .card .card-body {
    width: 100%;
}

.what-we-do .card:hover .card-body {
    /* background: #8AA69D; */
    /* color: #c18a61; */
    color: #c18a61;
}

.what-we-do .card:hover .card-body a {
    color: #c18a61;
}

.what-we-do .card:hover .card-body i {
    color: #c18a61;
}


.hero-sec-1 {
    height: 288px;
    background-repeat: no-repeat;
    background-size: 100%;
}

/* .investment-banking{
    min-height: 412px;
}
.investment-banking img{
    height: 412px
} */

.headerNave ul li ul {
    display: none;
}
.headerNave ul li:hover ul {
    width: 100%;
    display: flex;
    flex-direction: column;
}


.card {
    position: relative;
  }
  
  .popup {
    top: 100px;
    /* left: 50%; */
    right: 50%;
    transform: translateX(-50%, -50%);
    max-width: 18rem;
    white-space: normal;
    overflow-wrap: break-word;
    z-index: 10;
  }
  
  .group:hover .popup {
    opacity: 1;
  }
  
  

.recent-transactions .card {
    border-radius: var(--MD, 12px) var(--MD, 12px) var(--MD, 12px) var(--MD, 12px);
    background: var(--Base-Light, #FFF);
    overflow: hidden;
    /* Shadow */
    box-shadow: 10px 10px 50px 3px rgba(39, 92, 141, 0.10);

}

.recent-transactions .card .card-body {
    height: 217px;
    background-color: rgba(255, 255, 255, 0.67);
}

.recent-transactions .card .card-footer {
    text-align: center;
    border-radius: 0px 0px var(--MD, 12px) var(--MD, 12px);
    background: var(--Base-Light, #FFF);
    box-shadow: 10px 10px 50px 3px rgba(39, 92, 141, 0.10);
    color: #11131E33;
    padding: 13px 0;
}

.equity-research {
    height: 450px;
}

.equity-research img {
    height: 450px;
}

.market-support .card {
    background-repeat: no-repeat;
    height: 292px;
    padding: 52px 47px;
    width: 100%;
    background-size: cover;
    position: relative;
}

.market-support .card .right-btn {
    position: absolute;
    right: 20px;
    bottom: 20px;
}

/* .stock-block {height: 490px;} */
/* .stock-block .img-bg{height: 490px;background-repeat: no-repeat;background-size: cover;} */

.career {
    height: 364px;
}

.career .img-bg {
    height: 364px;
    background-repeat: no-repeat;
    background-size: cover;
}

.team-section .card p{
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s ease;
}
.team-section .card p:hover{
    -webkit-line-clamp: unset;
    transition: max-height 0.5s ease;
}
.team-section img{
    box-shadow: inset 0px -37px 2px 0px #356857;
  }

.group:hover .absolute {
    transform: translateY(0px);
  }

  .absolute {
    transform: translateY(10px); 
    transition: transform 0.9s ease, opacity 0.3s ease; 
  }
  .joinTeam:hover{
    background-color: #c18a61;
  }


  /* StockBlock */
.howItwork .tabsview{
    background-color: #ffffff26;
}
 .howItwork .stockblockTab {
    background-color: hsla(0, 0%, 100%, 0.05);
    box-shadow: 0 4px 100px rgba(0, 0, 0, 0.35);
    color: #c18a61;
  }
  
 .howItwork .stockblockTab.active {
    background-color: hsla(0, 0%, 100%, 0.15);
    color: #ffffff;
  }
  
        /* Custom adjustments for slider width and padding */
    
.custom-prev-arrow, .custom-next-arrow {
    color: #5e5a5a6e;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease; 
    font-size: 24px;
    padding: 10px;
}
      
.custom-prev-arrow { position: absolute; top: 104%; left: 47%;}
.custom-prev-arrow:hover {         -webkit-transform: translateX(-6px);
transform: translateX(-6px);}
.custom-next-arrow { position: absolute; top: 104%; right: 47%; }
.custom-next-arrow:hover {
-webkit-transform: translateX(6px);
    transform: translateX(6px);
}

    .slick-slide {
    padding: 10px;
    position: relative;
}
.blur-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(0.8px);
    background: rgba(255, 255, 255, 0.5);
    pointer-events: none;
}
.slick-current .blur-overlay {
    display: none;
}
@media (max-width: 1300px) {
    html {
        font-size: 95%;
    }
    .fs-76 {
        font-size: 4rem;
    }
}

@media (max-width: 1200px) {
    html {
        font-size: 90%;
    }
    .fs-76 {
        font-size: 4rem;
    }
    .custom-prev-arrow {left: 46%;}
    .custom-next-arrow {right: 46%; }
}

@media only screen and (max-width: 1000px) {
    html {
        font-size: 100%;
    }

    .fs-96 {
        font-size: 4rem
    }
    .fs-76 {
        font-size: 2.5rem;
    }
    .custom-prev-arrow {left: 44%;}
    .custom-next-arrow {right: 44%; }

}
@media only screen and (max-width: 600px) {
    html {
        font-size: 80%;
    }

    .fs-96 {
        font-size: 4rem
    }

    .hero-sec-1 {
        height: 118px;
    }

    .investment-banking {
        min-height: auto;
    }

    .equity-research {
        height: auto;
    }

    .market-support .card {
        height: auto;
    }

    .stock-block {
        height: auto;
    }

    .stock-block .img-bg {
        height: auto;
    }

    .market-support .card {
        padding: 25px;
    }


    .career {
        height: auto;
    }

    .career .img-bg {
        height: 164px;
    }

    .recent-transactions .card .card-body {
        height: 130px;
    }
    .custom-prev-arrow {left: 43%;}
    .custom-next-arrow {right: 43%; }
}
@media only screen and (max-width: 480px) {
    .custom-prev-arrow {left: 41%;}
    .custom-next-arrow {right: 41%; }
}
@media only screen and (max-width: 400px) {
    .custom-prev-arrow {left: 38%;}
    .custom-next-arrow {right: 38%; }
}