@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
:root{
        --bodyColor: #2e4052;
        --darkColor: #1D1D25;
        --whiteColor: #fff;
        --sunGlow: #ffc857;
        --darkPink: #412234;
        --chakra: "Chakra Petch", sans-serif
    }
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}    

h1,h2,h3,h4,h5,h6{
    font-family: "Chakra Petch", sans-serif;
}

p{
     font-family: "Inter", sans-serif;
}

    body{
        background-color: #BDD9BF!important;
    }
    /* Hide scrollbar for Chrome, Safari and Opera */
.designationBannerHome::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.designationBannerHome {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
    .darkBg{
        background: var(--bodyColor);
    }
    .bg-dark{
        background: var(--darkColor);
    }
    #collapsibleNavbar ul li{
        font-family: 'Inter', sans-serif;
        text-transform: uppercase;
        font-size: small;
    }
    #collapsibleNavbar ul li a{
        color: var(--whiteColor);
    }
    #collapsibleNavbar ul li a:hover{
        color: var(--sunGlow);
    }
    .navbar-brand{
        font-size:1.1rem;
        text-transform: uppercase;
        font-family: var(--chakra);
    }
    .chakra{
        font-family: var(--chakra);
    }
    .designationBannerHome{
        position:relative;
        overflow-x: scroll;
        white-space: nowrap;
    }
    .designationBannerHome p:before{
        content:'';
        width:10px;
        height:10px;
        background: var(--sunGlow);
        display:block;
        border-radius:50px;
        margin-right:1rem;
    }
    .designationBannerHome p{
        padding-left:1rem;
        display:flex;
        align-items:center;
        color:#fff;
        font-size: 1.2rem;
        
    }
    .designationBannerHome p:first-child{
        padding-left: 0;
        font-family: 'Inter', sans-serif;
    }
    .homeBannerIntro{
        color:#bdd9bf;
        font-family: 'Inter', sans-serif;
    }
    .cvBtn{
        background: #FFC857;
        padding: 0.5rem 1.2rem;
        border-radius: 50px;
        text-decoration: none;
        color: #000;
        font-family: 'Chakra Petch';
        font-weight: 600;
        margin-top: 1rem;
        display: inline-block;
        transition: 0.2s ease-in;
    }
    .cvBtn:hover{
        background: #BDD9BF;
    }
    .cvBtnAll{
       background: #FFC857;
        padding: 0.5rem 1.2rem;
        border-radius: 50px;
        text-decoration: none;
        color: #000;
        font-family: 'Chakra Petch';
        font-weight: 600;
        margin-top: 1rem;
        display: inline-block;
        transition: 0.2s ease-in; 
    }
    .cvBtnAll:hover{
        background: var(--bodyColor);
        color:#fff;
    }
.roundBottom{
        border-radius: 0 0 10rem 10rem;
}
.bannerImg:hover{
    filter: drop-shadow(10px 10px 0px #fff);
}
.bannerImg{
    transition:0.2s ease-in;
}
.readMoreBtn{
    text-decoration: none;
}
@media(max-width:820px){
   .roundBottom{
        border-radius: 0 0 6rem 6rem;
} 
}
@media(max-width:576px){
   .roundBottom{
        border-radius: 0 0 3rem 3rem;
} 
}
@media(min-width:768px){
    .linkedinMd{
        position:absolute;
        right:1.5rem;
    }
}
.linkedinMd a{
    color: #bdd9bf;
    transition: 0.2s ease-in;
}
.linkedinMd a:hover{
   color: #0077B5; 
}
.quoteIcn{
    width: 154px;
    position: absolute;
    z-index: 0;
    top: 37px;
    opacity: 0.7;
}
li::marker{
    color:#149ed9!important;
}
.roles li{
    color:#fff;
    padding-bottom: 1rem;
}
.navbar-brand:hover{
    color: #bdd9bf!important;
}

.Marqwrapper {
  overflow: hidden;
  display: flex;
  pointer-events: auto;
  touch-action: none;
  background: var(--sunGlow);
}

.Marqtext {
  animation: marqueueT infinite 30s linear; /* Increased duration for smoother animation */
  white-space: nowrap;
  padding-left: 10vw;
  padding:1rem 0;
  font-size: 20px;
  will-change: transform; /* Hint the browser to optimize animations on this property */
  color: #000;
  font-weight:600;
}

.Marqwrapper:hover .Marqtext {
  animation-play-state: paused; /* Pause animation on hover */
}

.Marqtext::after {
  padding-left: 10vw;
  content: attr(data-text);
  display: inline-block;
}

@keyframes marqueueT {
  0% {
    transform: translate3d(0%, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

.blog-card a{
    color: var(--darkPink);
    transition: 0.2s ease-in;
}
.blog-card a:hover{
    color: var(--bodyColor);
}

.socialLinks li a i{
    font-size: 1.25rem;
}
.socialLinks li a{
    background: var(--sunGlow);
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border-radius: 50px;
    color: #000;
    transition: 0.2s ease-in;
}
.socialLinks li a:hover{
    background: var(--darkColor);
    color: #fff;
}
.socialLinks li{
    margin-right: 0.75rem;
}
.socialLinks li:last-child{
    margin-right:0;
}
.ConsultingServicesOfferingCarousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
}
.ConsultingServicesOfferingCarousel-inner {
    display: flex;
    transition: transform 0.5s ease;
}
.ConsultingServicesOfferingCarousel-item {
    flex: 1 0 100%;
    box-sizing: border-box;
    background:#fff;
    padding: 1rem;
    border-radius: 0.5rem;
    position:relative;
}
.ConsultingServicesOfferingCarousel-button{
    background: #ffc857;
    border: none;
    padding: 0.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    transition:0.2s ease-in;
}
.ConsultingServicesOfferingCarousel-button:hover{
    background: var(--bodyColor);
    color: #fff;
}
.mySkills li{
    background: #bdd9bf;
    padding: 0.5rem 1rem;
    margin: 0.5rem;
    font-size: 1.3rem;
    border-radius:50px;
}

/* Portfolio Page CSS Start */
.portfolio-filters {
    display: flex;
    gap: 10px;
    overflow-y: scroll;
    white-space: nowrap;
}

.portfolio-filters::-webkit-scrollbar {
    display: none;
}

.portfolio-filters {
  -ms-overflow-style: none;  
  scrollbar-width: none; 
}

.filter-btn {
    background: var(--whiteColor);
    border: none;
    padding: 5px 15px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    border-radius: 50px;
}

.filter-btn.active {
    background: var(--sunGlow);
}

.portfolio-card.card {
    padding: 16px;
    border-radius: 16px;
}

.portfolio-card.card .card-body {
    padding: 16px 0;
}

.portfolio-card.card .card-footer {
    padding: 8px 0;
    display: flex;
    justify-content: end;
}

.view-project-btn {
    background: var(--bodyColor);
    color: var(--whiteColor);
    border: none;
    padding: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    transition: 0.2s ease-in;
}

.view-project-btn:hover, .view-project-btn:focus {
    transform: rotate(45deg);
    background: var(--sunGlow);
    color: var(--bodyColor);
}

#portfolioModal .modal-content {
    border-radius: 20px;
}
/* Portfolio Page CSS Close */