:root {
    --pink: rgb(247, 25, 173);
    --purple: rgb(125, 25, 247);
    --green: rgb(52, 191, 61);
    --red: hsl(0, 78%, 62%);
    --cyan: hsl(180, 70%, 38%);  /* hsl(180, 70%, 38%) */
    --orange: #fe950b;
    --blue: #04b6e7;
    --varyDarkBlue: hsl(234, 12%, 34%);
    --grayishBlue: hsl(229, 6%, 66%);
    --veryLightGray: hsl(300, 22%, 89%);
    --new-primary:#141414 ;/* cyan #10738e green #2a6803 purple #620cb7 navy blue 04096f,gray 252526, burnt orange 9d4011*/
    --new-secondary:#bcb21d;    /* gold rgb(181, 157, 21)   light gold rgb(219, 189, 22)*/
    --new-secondary-light:#bcb21d;
    --text-on-primary:#bcb21d;

    --alert-primary:#fdf6db ;/* cyan #10738e green #2a6803 purple #620cb7 navy blue 04096f,gray 252526, burnt orange 9d4011*/
    --alert-secondary:#4c3f03;    /* gold rgb(181, 157, 21)   light gold rgb(219, 189, 22)*/

    --primary-btn:rgb(247, 25, 173);
    --primary-btn-color:#fff;
    --label-color:#714f06;  
    --label-color-radio:#5d5d5d;
    



    
    --weight1: 200;
    --weight2: 400;
    --weight3: 600;
}
/*
body {
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    background-color: var(--veryLightGray);
}
.container {
    background-color:transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 5px;
  }
h3{
    color:#5f5e5e;
}

h1{
    color:#111010;
}
h2{
    color:#5f5e5e;
}
    */
    .cyan,.red,.blue,.purple,.pink,.green,.orange
    {
        border-bottom: 10px solid var(--purple);
        border-top: 15px solid var(--purple);
        border-radius: 20px;
    
    }
.cyan {
    border-color: var(--cyan);
}
.red {
    border-color: var(--red);
}
.blue {
    border-color: var(--blue);
}
.orange {
    border-color: var(--orange);

}
.green {
    border-color: var(--green);
}
.pink {
    border-color: var(--pink);

}
.purple {
    border-color: var(--purple);

}

.cyan,.red,.blue,.purple,.pink,.green,.orange
{

    border-bottom-color: #b59d15;

}


.cyan-left {
    border-left: 15px solid var(--cyan);
}
.red-left {
    border-left: 15px solid var(--red);
}
.blue-left {
    border-left: 15px solid var(--blue);
}
.orange-left {
    border-left: 15px solid var(--orange);
}
.green-left {
    border-left: 15px solid var(--green);
}
.pink-left {
    border-left: 15px solid var(--pink);
}
.purple-left {
    border-left: 15px solid var(--purple);
}


.cyan-top {
    border-top: 15px solid var(--cyan);
}
.red-top {
    border-top: 15px solid var(--red);
}
.blue-top {
    border-top: 15px solid var(--blue);
}
.orange-top {
    border-top: 15px solid var(--orange);
}
.green-top {
    border-top: 15px solid var(--green);
}
.pink-top {
    border-top: 15px solid var(--pink);
}
.purple-top {
    border-top: 15px solid var(--purple);
}



.cyan-bg {
    background: none;
    background-color:hsl(180, 81%, 84%);
    color:var(--cyan);
    font-weight: bold;

}
.red-bg {
    background: none;
    background-color:hsl(0, 81%, 82%);
    color:var(--red);
    font-weight: bold;

}
.blue-bg {
    background: none;
    background-color:#a7eafb;
    color:var(--blue);
    font-weight: bold;

}
.orange-bg {
   /* border-top: 3px solid var(--orange);*/
    background: none;
    background-color:#fbe7a7;
    color:var(--orange);
    font-weight: bold;
}
.green-bg {
    background: none;
    background-color:#b2fabf;
    color:var(--green);
    font-weight: bold;
}
.pink-bg {
    background: none;
    background-color:#f7afdf;
    color:var(--pink);
    font-weight: bold;

}
.purple-bg {
    background: none;
    background-color:#cba7fb;
    color:var(--purple);
    font-weight: bold;

}



.cyan-text {
    color:  var(--cyan);
}
.red-text {
    color: var(--red);
}
.blue-text {
    color: var(--blue);
}
.orange-text {
    color: var(--orange);
}
.green-text {
    color: var(--green);
}
.pink-text {
    color: var(--pink);
}
.purple-text {
    color: var(--purple);
}



.cyan .fa {
    color:  var(--cyan);
}
.red .fa {
    color: var(--red);
}
.blue .fa {
    color: var(--blue);
}
.orange .fa {
    color: var(--orange);
}
.green .fa {
    color: var(--green);
}
.pink .fa {
    color: var(--pink);
}
.purple .fa {
    color: var(--purple);
}

.btn-cyan:hover {
    border:  var(--cyan);
    color:#fff;
    background:var(--cyan);
}

.btn-cyan {
 color: var(--cyan);
  background-color: #fff;
  border: 1px solid var(--cyan);
}

.btn-red:hover {
    border:  var(--red);
    color:#fff;
    background:var(--red);
}

.btn-red {
 color: var(--red);
  background-color: #fff;
  border: 1px solid var(--red);
}


.btn-blue:hover {
    border:  var(--blue);
    color:#fff;
    background:var(--blue);
}

.btn-blue {
 color: var(--blue);
  background-color: #fff;
  border: 1px solid var(--blue);
}


.btn-orange:hover {
    border:  var(--orange);
    color:#fff;
    background:var(--orange);
}

.btn-orange {
 color: var(--orange);
  background-color: #fff;
  border: 1px solid var(--orange);
}


.btn-green:hover {
    border:  var(--green);
    color:#fff;
    background:var(--green);
}

.btn-green {
 color: var(--green);
  background-color: #fff;
  border: 1px solid var(--green);
}

.btn-pink:hover {
    border:  var(--pink);
    color:#fff;
    background:var(--pink);
}

.btn-pink {
 color: var(--pink);
  background-color: #fff;
  border: 1px solid var(--pink);
}

.btn-purple:hover {
    border:  var(--purple);
    color:#fff;
    background:var(--purple);
}

.btn-purple {
 color: var(--purple);
  background-color: #fff;
  border: 1px solid var(--purple);
}
.colorful-heading
{
    font-style: normal;
    margin-bottom: 0px;
   

}

.colorful-heading {
	background-color: var(--purple);
	border-radius: .33rem;
	color: #fff;
	font-family: inherit;
	
	line-height: inherit;
	padding-top: 0.6rem;
	padding-right: 1rem;
	padding-bottom: 0.6rem;
	padding-left: 1rem;
	text-decoration: none;
    margin-top: 70px;
    margin-bottom: 10px;
}
.colorful-heading-pink {
	background-color: var(--pink);
	border-color: var(--pink);
}
.colorful-heading-blue {
	background-color: var(--blue);
	border-color: var(--blue);
}

.colorful-heading-top
{
    margin-top: 0px;

}

.colorful-heading-top,.colorful-heading
{
    color: var(--text-on-primary);
    background-color:var(--new-primary);
    padding-left: 10px;
    border-right-color:var(--new-secondary);
    border-left-color: var(--new-secondary);


}
/*
.colorful-heading-top,.colorful-heading
{
    border-right-width: 20px;
    border-right-style:solid ;
    
    border-top-right-radius: 95px;
    border-bottom-right-radius: 25px;

    border-left-width: 20px;
    border-left-style:solid ;

    border-top-left-radius: 95px;
    border-bottom-left-radius: 25px;

    border-top-width: 0px;
    border-top-style:solid ;

 

}*/

.colorful-heading-top,.colorful-heading
{
    border-right-width: 20px;
    position: relative;
    border: 1px solid  var(--new-secondary);
    border-left: 15px solid var(--new-secondary);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
    background-color: var(--new-primary);
    transition: box-shadow 0.2s ease;
    color: var(--new-secondary);


 

}

/*
@media (min-width: 1092px) {



}


@media (max-width: 1091.98px) {

    .colorful-heading-top,.colorful-heading
    {
        border-right-width: 10px;
        border-right-style:solid ;
        
        border-top-right-radius: 15px;
        border-bottom-right-radius: 5px;
    
        border-left-width: 10px;
        border-left-style:solid ;
    
        border-top-left-radius: 15px;
        border-bottom-left-radius: 5px;
    
       
       
    
    }
}
*/

.circle-list {
    list-style: none;
    padding-left: 15px;
    padding-top: 0px;
    margin-top: 0px;
}

.circle-list li {
    position: relative;
    font-size: 18px;
    padding-left: 30px; /* space for the bullet */
    margin: 10px 0; /* spacing between list items */
}

.circle-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* Centers the circle vertically */
    width: 15px;
    height: 15px;
    border-radius: 50%; /* Makes it circular */
}

.cyan-li::before {
    background-color: var(--cyan);
}
.red-li::before {
    background-color: var(--red);
}
.blue-li::before {
    background-color: var(--blue);
}
.orange-li::before {
    background-color: var(--orange); /* Blue color */
}
.green-li::before {
    background-color: var(--green);
}
.pink-li::before {
    background-color: var(--pink);
}
.purple-li::before {
    background-color: var(--purple);
}



.bold
{
    font-size: 16px;
}

.card-text
{
    color:#333;
}


.card {
    position: relative;
}

.card::after,
.card::before,
.card .third-circle {
    content: "";
    position: absolute;
    bottom: 10px; /* Adjust the distance from the bottom */
    width: 16px;
    height: 16px;
   /* background-color: #3498db; /* Choose your desired color */
    border-radius: 50%;
    display: inline-block;
    margin-left: 5px; /* Adjust the distance between circles */
}

.card::after {
    right: 10px; /* Adjust the distance from the right */
}

.card::before {
    right: 30px; /* Adjust the distance from the right */
}

.card .third-circle {
    right: 50px; /* Adjust the distance from the right */
}


.cyan::after,.cyan::before {
    background-color:  var(--cyan) ;
}
.red::after,.red::before {
    background-color: var(--red);
}

.blue::after,.blue::before {
    background-color: var(--blue);
}
.orange::after,.orange::before {
    background-color: var(--orange) ;
}

.green::after,.green::before {
    background-color: var(--green) ;
}
.pink::after,.pink::before {
    background-color: var(--pink) ;
}
.purple::after,.purple::before {
    background-color: var(--purple) ;
}


/* Now circle etc.  for product card*/

.product-main-card::after,
.product-main-card::before,
.product-main-card .third-circle {
    content: "";
    position: absolute;
    bottom: 10px; /* Adjust the distance from the bottom */
    width: 16px;
    height: 16px;
   /* background-color: #3498db; /* Choose your desired color */
    border-radius: 50%;
    display: inline-block;
    margin-left: 5px; /* Adjust the distance between circles */
}

.product-main-card::after {
    right: 10px; /* Adjust the distance from the right */
}

.product-main-card::before {
    right: 30px; /* Adjust the distance from the right */
}

.product-main-card .third-circle {
    right: 50px; /* Adjust the distance from the right */
}


.cyan-top::after,.cyan-top::before {
    background-color:  var(--cyan) ;
}
.red-top::after,.red-top::before {
    background-color: var(--red);
}

.blue-top::after,.blue-top::before {
    background-color: var(--blue);
}
.orange-top::after,.orange-top::before {
    background-color: var(--orange) ;
}

.green-top::after,.green-top::before {
    background-color: var(--green) ;
}
.pink-top::after,.pink-top::before {
    background-color: var(--pink) ;
}
.purple-top::after,.purple-top::before {
    background-color: var(--purple) ;
}










/* Add this CSS to your stylesheet or in a style tag in the head of your HTML */

.btn-custom {
    font-size: 14px; /* Adjust font size as needed */
    padding: 8px 16px; /* Adjust padding as needed */
    border-radius: 5px; /* Add some border-radius for rounded corners */
    margin-right: 5px; /* Adjust margin between buttons as needed */
}

.btn-pink {
    color: var(--pink);
    background-color: #fff; /* Use a light background for contrast */
    border: 1px solid var(--pink);
}

.btn-green {
    color: var(--green);
    background-color: #fff; /* Use a light background for contrast */
    border: 1px solid var(--green);
}

.btn-red {
    color: var(--red);
    background-color: #fff; /* Use a light background for contrast */
    border: 1px solid var(--red);
}

.btn-custom.active {
    background-color: var(--pink); /* Change background color for active button */
    color: #fff; /* Change text color for active button */
}
.card-text {
    text-align: justify;
}