.custom-container {
    display: flex;
    flex-wrap: wrap;
}

.left-column {
    width: 70%;
    padding: 6px;
}

.course-title {
    padding: 0px;
    border-radius: 10px;
    text-align: left;
    font-weight: bold;
    border: none; /* Remove the border */
	margin-bottom: 20px; /* Increased space below the course image */
}

.back-link-row {
  grid-column: 1 / -1; /* span both columns */
  padding-left: 6px;
}

.back-link {
    display: inline-block;
    margin-top: 20px;
    font-size: 16px;
    text-decoration: none;
}

.back-link:hover {
    text-decoration: underline;
}



.course-title img {
    display: block;
    max-width: 100%;
    margin-top: 10px;
    border-radius: 5px;
}


.course-heading {
    position: relative;
    margin: 24px 0 12px;
    font-size: clamp(1.5rem, 2.2vw, 1.9rem); /* reduced */
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: .5px;
    color: #1a1f29;
    padding-left: 14px;
}
.course-heading:before {
    content: "";
    position: absolute;
    left: 0;
    top: 6%;
    bottom: 10%;
    width: 5px;
    border-radius: 4px;
    background: linear-gradient(180deg,#1e9eff,#117fcc);
}
.course-heading:after {
    content: "";
    display: block;
    margin-top: 10px;
    width: 70px;
    height: 4px;
    border-radius: 3px;
    background: linear-gradient(90deg,#0674ce,#0f95e2);
}


.course-info {
    display: flex;
    align-items: center;   /* keeps them vertically aligned */
    margin-top: 4px;      /* Space below H1 */
    margin-bottom: 10px;   /* Space below H1 */
    font-size: 14px;
    gap: 8px;              /* adds spacing between number and icon */
}

.course-number {
    color: grey;
    margin-right: 30px; /* bigger space before icon */
}


.course-overview-card {
    background: #ffffff;
    border: 1px solid #e3e6ea;
    border-radius: 6px;
    padding: 24px 28px;
    max-width: 100%;
    margin-top: 30px;
}

.course-overview-card > .course-section + .course-section {
    margin-top: 28px;
}

.course-overview-card h2 {
    margin: 0 0 12px;
    font-size: 20px;
    line-height: 1.25;
}

/* Optional: refine list inside objectives */
.course-overview-card .course-description ul {
    padding-left: 20px;
    margin: 0 0 8px;
}



.course-description {
    margin-top: 30px; /* Increased space between share icon and paragraph */
    font-size: 16px;
    line-height: 1.5;
    color: #333; /* Adjust text color if needed */
}





/* Ensure the right column layout is consistent */
.right-column {
    width: 30%;
    padding: 6px;
}

.registration-detail,
.package-board,
.package-detail-board {
    /* card or panel */
border-radius: 10px;
border: 1px solid #e0e0e0;   /* subtle modern border */
padding: 20px;
background-color: #ffffff;
margin-top: 10px;
/* no shadow */
box-shadow: none;

}

.package-detail-board {    
    text-align: center; /* Center the title and image */
}



.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    width: 100%; /* Set width to 100% */
}

.price {
    font-size: 20px;
    font-weight: bold;
}

.hours {
    font-size: 16px;
    font-weight: 400;
}

.add-to-cart {
    display: block;
    padding: 10px 20px;
    background-color:var(--darkblue-color);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 0 auto; /* Center the button */
    width: 100%; /* Match width with detail-header */
    text-align: center;
}

.add-to-cart:hover {
    background-color:var(--blue-color);
}



.package-board h2 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0; /* Remove default margin */
    text-align: center;
}

.normal-text {
    font-weight: normal; /* Normal weight for the specified part */
}


.package-detail-board h2 {
    font-size: 18px;
   
    color: #1e9eff; /* Replace this with the color code of your button */
    margin-bottom: 15px; /* Adds space below the title */
}

.package-detail-board img {
   width:100%;
   object-fit:cover;
   border-radius:.75rem;
   transition:transform .3s ease;   /* keeps your zoom effect */

}

.package-detail-board img:hover {
    transform: scale(1.05); /* Zoom effect on hover */
}




.ceus-info {
    font-size: 16px;
    line-height: 1.5;
}

.ceus-info h2{
  margin:0 0 12px;          /* keep the space you like */
  padding-bottom:8px;       /* room for the line */
  border-bottom:1px solid #f0f4fa;   /* change colour / thickness as needed */
}



.ceu-label, .price-label {
    font-weight: bold;
    color: black;
}

.ceu-value {
    font-weight: bold;
    color: blue;
}

.price-value {
    font-weight: bold;
    color: #d69515; /* Customize as needed */
}

.spacer {
    display: inline-block;
    width: 10px; /* Adjust space as needed */
}


/* Responsive for smaller screens */
@media screen and (max-width: 768px) {
    .custom-container {
        flex-direction: column;
    }

    .left-column, .right-column {
        width: 100%;
    }

    .detail-header {
        flex-direction: column; /* Stack price and hours */
        align-items: flex-start;
    }

    .hours {
        margin-top: 5px; /* Space between price and hours */
    }

    .add-to-cart-container {
        display: flex;
        justify-content: flex-end; /* Align the button to the right */
        width: 100%;
        margin-top: 20px; /* Adjust position for better alignment */
    }

.course-overview-card {
    padding: 24px 12px;
}


}