/* Add your custom styles here */

body {
    background-color: #1d1431 !important; 
    font-family: 'Raleway', sans-serif !important; 
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #5E6282;
    background-color: #FFFEFE;
    background-image: url('../img/category/purple_curve.svg');
    background-repeat: no-repeat; /* or no-repeat */
    background-size: 95%;    /* or contain or 100% 100% */
    background-attachment: fixed; /* Optional: for parallax feel */
    background-position: center 66%;
      }

.navbar {
    background-color: #f8f6f7 !important; 
}

.navbar .nav-link {
    color: #1d1431 !important; 
}

.navbar .nav-link:hover {
    color: #774edb !important; 
}

.navbar .nav-link.active {
    color: #774edb; 
}

.dropdown-item {
    color: #1d1431;
}

.card:hover .fw-medium {
    color: #774edb; /* or any color you want */
  }

.d-inline-block {
    color: #1d1431 !important; 
}

.d-inline-block:hover {
    color: #774edb !important; 
}

.d-inline-block.active {
    color: #774edb !important; 
}

h4.fw-bold.text-danger {
    font-family: 'Raleway', sans-serif; 
    color: #f8f6f7 !important; 
}

h1.hero-title {
    font-family: 'Raleway', sans-serif; 
    color: #f8f6f7; 
}

.custom-line-spacing {
    line-height: 1.8; /* Adjust as needed (1.5 to 2 is usually good) */
  }

.btn-primary {
    background-color: #3d9fc3; 
    color: #f8f6f7; 
}


.btn-primary:hover {
    background-color: #f8f6f7;
    color: #3d9fc3;
    border: 2px solid #3d9fc3;
  }
  
  .play-icon {
    color: #f8f6f7; /* Default color */
    transition: color 0.3s ease; /* Smooth transition */
  }
  
  .btn:hover .play-icon {
    color: #3d9fc3; /* Color on hover */
  }
  
  .btn-danger:hover {
    background-color: #F8F6F7;
    border-color: #F8F6F7;
  }

  .btn-danger{
    background-color:#3d9fc3;
  }

  .danger-btn-shadow {
    transition: box-shadow 0.3s ease; /* Smooth transition for shadow */
}

.danger-btn-shadow:hover {
    box-shadow: 0 2px 2px rgba(61, 159, 195, 1.0); /* Darker shadow on hover */
}

.primary-btn-shadow,
.danger-btn-shadow {
  box-shadow: none !important;
}

.hero-img {
  max-width: 70%;
  height: auto;
  margin: 0 auto 2rem auto; /* top, right, bottom, left */
  display: block;
}
  
/* Card Background and Border */
.card.service-card {
    background-color: #1d1431; /* Change to your desired background color */
    border: 1px solid #f8f6f7; /* Optional: Change border color */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth hover effect */
  }
  
  /* Card Hover Effect */
  .card.service-card:hover {
    background-color: rgba(119, 77, 219, 0.1); /* Adjust the alpha (0.0 to 1.0) */
    border-color: #16cccf; /* Optional: Highlight border on hover */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

  
  /* Card Text */
  .card.service-card h4 {
    color: #eba40a; /* Change to your desired heading color */
  }
  
  .card.service-card p {
    color: #16cccf; /* Change to your desired text color */
  }
  
  /* Card Icon (SVG Image) */
.card.service-card img {
    filter: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg); /* Adjust SVG color */
    transition: transform 0.3s ease; /* Smooth scaling effect */
  }
  
.card.service-card:hover img {
    transform: scale(1.1); /* Slightly enlarge on hover */
  }
  

  .equal-card-img {
    height: 375px; /* Adjust as needed */
    object-fit: cover;
    width: 100%;
    display: block;
  }

.text-secondary {
    color: #F8F6F7 !important; /* Replace with your desired color */
    font-family: 'Raleway', sans-serif !important; /* Replace with your desired font */
    font-size: 18px; /* Optional: Adjust size if needed */
    font-weight: bold; /* Optional: Adjust weight */
}

.text-team {
    color: #16cccf !important; /* Replace with your desired color */
    font-family: 'Raleway', sans-serif !important; /* Replace with your desired font */
    font-size: 18px; /* Optional: Adjust size if needed */
    font-weight: bold; /* Optional: Adjust weight */    
}

.fs-xl-10, .fs-lg-8, .fs-7 {
    font-size: 36px; /* Adjust size for different screen sizes */
}

.fw-bold {
    font-weight: bold; /* Ensure bold styling */
}

.font-cursive {
    font-family: 'Raleway', sans-serif !important; /* Replace with your desired cursive font */
}

.text-capitalize {
    text-transform: capitalize;
    color: #16cccf !important; /* Your desired color */
}

.custom-image-size {
    width: 100%; /* or set a specific pixel width */
    height: auto; /* keeps aspect ratio */
  }