.courses-flex-container {
display: flex;
position: relative;
flex-direction: column;
align-items: center; 
justify-content:center;
background-color:var(--pure-pale-white);
}

.courses-heading{
display: flex;
width:80%;
align-items: center; /* Vertically centers content within each section */
justify-content: flex-start;
margin:var(--margin-xxl);
background-color: #f0f4f8; /* subtle light blue-gray background */
padding: 16px;
border-radius: 8px;
}

.courses-container{
display: flex;
flex-wrap: wrap;
align-items: center; /* Vertically centers content within each section */
justify-content: center;
gap:clamp(20px, 7vw, 110px);
}

/* 22vw is 22% of 1536px = around 338px */
.courses-card{
display: flex;
flex-direction: column;
align-items: flex-start; /* Vertically centers content within each section */
justify-content: flex-start;
position: relative;
padding:var(--padding-sm);
width:22vw; /* Width of the card */
min-width:320px;
max-width:330px;
height:58vh;
min-height: 380px;
max-height: 390px;
box-sizing: border-box;
border-radius: 5px;
box-shadow: 0 1px 4px rgba(0,0,0,0.2); /* Optional: for card shadow */
transition: all 0.3s;
}

.courses-img {
width: 100%; /* Ensures images scale within the container */
aspect-ratio: 16 / 9;
/* height: 200px;  Fixed height to maintain uniformity */
object-fit: cover; /* ✅ Ensures images fill the space without stretching */
border-radius: 5px; /* Optional: Rounds image corners */
}

.course-url-price{
margin-top:var(--margin-xxs);
gap:var(--margin-xxs);
display: flex;
margin-left:var(--margin-xxs);
flex-direction: column;
align-items:flex-start; /* Vertically centers content within each section */
justify-content:flex-start;
flex-grow: 1; /* Takes up all available space */
}

.card-details-container{
display: none;
}


.card-details {
position: absolute;
display:flex;
flex-direction: column;
justify-content: space-evenly;
background-color: var(--pure-white); /* Or any color you prefer */
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); /* Shadow for pop-up */
padding:var(--padding-md);
border-radius: 5px;
top: -10px; /* Adjust based on your design */
left: 100%;
width:100%; /* Or fixed width, adjust as needed */
height: auto; /* Or fixed height, adjust as needed */
z-index: 10; /* Ensures it appears above other content */
transition: opacity 0.5s ease, visibility 0.5s ease; /* Smooth appearance */
}

.card-details-row{
display: flex; /* Hide by default */
align-items: flex-start; /* Vertically centers content within each section */
justify-content: flex-start;   
gap:var(--margin-sm);
}


.push-but{
margin-top: auto; /* like align-self, using auto Pushes it to the bottom */
}

.card-details::after {
content: '';
position: absolute;
top: 210px; /* Adjust based on exact alignment needs */
left: -20px; /* Position to the left of the card details */
width: 0;
height: 0;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-right:20px solid white; /* Creates a right-pointing white arrow */
transform: translateY(-50%); /* Center the arrow vertically */
}

.card-details.left::after {
right: auto; /* Remove right positioning for left side */
left: 100%; /* Move it to the right side when on the left */
border-right: none; /* Clear the right arrow */
border-left: 20px solid white; /* Create a left-pointing arrow when flipped */
}

.course-head-msg {
color: #26374e;  
font-size: var(--font-size-h3); 
font-weight:var(--font-weight-semibold); 
font-family: var(--font-family-heading);
margin: 0;
}


.courses-container a { 
color: var(--strong-blue-with-black-shade);
text-decoration: none;
font-size: var(--font-size-h5);
font-weight: bold; 
font-family: var(--font-branding);
}

.courses-container a:hover:hover {
color: var(--hover-links-for-black); /* Make sure this is different from --pure-white for visibility */
}

.auth-name-msg{
font-size: 16px;
color: #7f8c8d;
font-weight: bold;
}

.course-price{
font-size: 16px;
color: var(--pure-black);
font-weight: var(--font-weight-bold); 	
}

.original-price{
font-size: 16px;
color: var(--pure-black-opacity);
text-decoration: line-through;
text-decoration-color: var(--pure-black-opacity);
}

.course-updtd{
font-size: 16px;
color: var(--pure-black-opacity);
}

.course-updtd-date-info{
font-size: 16px;
color: var(--deep-gemstone-blue);
}

.course-hours-info{
font-size: 16px;
color: var(--pure-black-less-opacity);
}

.course-align-img {	
width: 20px; /* base size for 1536px screen */
height: auto;	
vertical-align:middle;
margin-top:var(--margin-xxs);
}

.course-points{
font-size: 16px;
color: var(--pure-black);
font-family: var(--font-family-base);
margin-bottom:var(--margin-xs);
}

.best-for-money{
color: var(--pure-black);
font-family: var(--font-branding);
font-weight:var(--font-weight-medium);
padding:var(--padding-xxs);
background-color:var(--natural-yellow);
margin-left:var(--margin-xs);
}

.courses-container .butn-strong-blue:hover{
background-color: var(--hover-butn-for-strong-blue);
}

.courses-container .button-green-shade-blue:hover{
background-color: var(--hover-butn-for-green-shade-blue);
}

/* ✅ Large Desktops (1920px and Above) */
@media (min-width: 1920px) {
    .courses-heading {
        width: 80%; /* Reduce width for better alignment */        
        margin: var(--margin-xxl);
        padding: 20px;
        border-radius: 10px;
    }

    .courses-card {
        max-width: 450px; /* Ensure consistency */
        min-height: 410px;
        max-height: 470px;
        padding:var(--padding-md);
    }

    .courses-container {
        gap: clamp(25px, 8vw, 120px);
    }

    .course-head-msg {
        font-size: calc(var(--font-size-h3) * 1.1);
    }

    .courses-container a {
        font-size: calc(var(--font-size-h5) * 1.1);
    }

    .auth-name-msg{
        font-size: 20px;
    }
        
    .course-price{
        font-size: 20px;	
    }
        
    .original-price{
        font-size: 20px;
    }

    .course-updtd{
        font-size: 20px;
    }
        
    .course-updtd-date-info{
        font-size: 20px;
    }
    
    .course-hours-info{
        font-size: 20px;
    }
       
    .course-points{
        font-size: 20px;
    }

    .course-align-img {	
        width: 22px; /* base size for 1536px screen */
     }
    
}

/* ✅ Standard Laptops (1280px - 1536px) */
@media (max-width: 1280px) {
    .courses-heading {
        width: 89%; /* Slightly wider for better alignment */
        margin: var(--margin-xl); /* Reduce margin */
        padding: 14px;
        border-radius: 6px;
    }

    .courses-card {
        max-width: 450px; /* Ensure consistency */
        min-height: 370px;
        max-height: 380px;
        padding:var(--padding-md);
    }

    .course-url-price {
        gap: 6px;
    }

    .courses-container {
        gap: clamp(15px, 6vw, 100px); /* Adjust spacing */
    }

    .course-head-msg {
        font-size: calc(var(--font-size-h3) * 0.9);
    }

    .courses-container a {
        font-size: calc(var(--font-size-h5) * 0.9); /* Adjust font size */
    }

    .auth-name-msg{
        font-size: 16px;
    }
        
    .course-price{
        font-size: 16px;	
    }
        
    .original-price{
        font-size: 16px;
    }

    .course-updtd{
        font-size: 16px;
    }
        
    .course-updtd-date-info{
        font-size: 16px;
    }
    
    .course-hours-info{
        font-size: 16px;
    }
       
    .course-points{
        font-size: 16px;
    }

    .course-align-img {	
        width: 18px; /* base size for 1536px screen */
     }

}

/* ✅ Small Laptops (1024px - 1280px) */
@media (max-width: 1024px) {
    .courses-heading {
        width: 90%; /* Expand width */
        margin: var(--margin-lg);
        padding: 12px;
        border-radius: 4px;
    }

     .courses-container {
        display: grid; 
        grid-template-columns: repeat(2, minmax(320px, 1fr)); /* Always 2 cards per row */
        gap: 125px;
        row-gap: 60px;          /* Optional: no gap vertically */
        justify-content: space-between; /* Evenly distribute cards */
        align-items: stretch; /* Ensures equal height */
        margin-bottom: var(--margin-xl); /* ✅ Adds spacing below the last row */
        padding-bottom: var(--padding-lg); /* ✅ Extra spacing for better separation */
    }

    .courses-card {
        min-width: 320px;
        max-width: 350px; /* Ensure consistency */
        min-height: 300px;
        max-height: 360px;
    }


    .course-url-price {
        gap: 4px;
    }

    .course-head-msg {
        font-size: calc(var(--font-size-h3) * 0.85);
    }

    .courses-container a {
        font-size: calc(var(--font-size-h5) * 0.85);
    }

    .auth-name-msg{
        font-size: 15px;
    }
        
    .course-price{
        font-size: 15px;	
    }
        
    .original-price{
        font-size: 15px;
    }

    .course-updtd{
        font-size: 15px;
    }
        
    .course-updtd-date-info{
        font-size: 15px;
    }
    
    .course-hours-info{
        font-size: 15px;
    }
       
    .course-points{
        font-size: 15px;
    }

    .course-align-img {	
        width: 16px; /* base size for 1536px screen */
     }
}