:root {
    --white: #ffffff;
    --primary-color: #C63458; 
    --dark-blue: #011339; 
    --light-blue: #0c1a43; 
    /* --text-color: #777; */
    --text-color:#011339cf;
    --light-gray: #F9FAFC;
    --tag-bg: #c6345612; 
    --tag-text: #C63458;
    --text-light:#A0A0A0;
    --border-color:#01133930; 
    --border-color-white-20:#ffffff30;

    --bg-gradient-start: #2c1a3c;
    --bg-gradient-end: #1a1f4b;

    --max-container:1140px;
    --max-container-lg:1440px;
}
html {
    scroll-behavior: smooth; /* enables smooth scrolling */
  }
  main{
    overflow: hidden;
  }
  a{
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
  }
  a:hover{ 
    color: var(--dark-blue);
    transition: 200ms;
  }
p {
    color: var(--text-color) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 30px !important;
 }
 .testimonial-section p{
    font-weight: 400 !important;
    font-size: 15px !important;
    line-height: 26px !important;
 }
 .testimonial-section .profile p{ font-size:12px !important; color: var(--text-color) !important; }
.tags {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.tag {
    background-color: var(--tag-bg);
    color: var(--tag-text);
    border: 1px solid var(--primary-color);
    padding: 5px 25px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.tag span {
    width: 4px;
    height: 4px;
    background-color: var(--primary-color);
    border-radius: 4px;
    /* font-size: 20px; */
    margin: 5px;
}

.tags-light {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.tag-light {
    background-color: #ffffff20;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 5px 25px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.tag-light span {
    width: 4px;
    height: 4px;
    background-color: var(--primary-color);
    border-radius: 4px;
    /* font-size: 20px; */
    margin: 5px;
}

.animate-item{
    transform: translateY(40px);
    opacity: 0;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    transition-delay: var(--animation-delay, 0s);
}
.animate-item.visible{
    transform: translateY(0px);
    opacity: 1; 
}