.elementor-16 .elementor-element.elementor-element-0d3db96{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-16 .elementor-element.elementor-element-0d3db96.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-16 .elementor-element.elementor-element-23fca69{--e-image-carousel-slides-to-show:1;}.elementor-16 .elementor-element.elementor-element-219f4ca{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-16 .elementor-element.elementor-element-77d9986{width:100%;max-width:100%;}.elementor-16 .elementor-element.elementor-element-77d9986.elementor-element{--flex-grow:1;--flex-shrink:0;}.elementor-16 .elementor-element.elementor-element-9f9cf82{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:38px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-16 .elementor-element.elementor-element-3e06762{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-16 .elementor-element.elementor-element-3e06762.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-16 .elementor-element.elementor-element-1342335 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:30px;font-weight:600;color:#0900A2;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-16 .elementor-element.elementor-element-347a31f{text-align:justify;font-family:"Roboto", Sans-serif;font-size:15px;font-weight:400;color:#3B3B3B;}.elementor-16 .elementor-element.elementor-element-8e07025{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-16 .elementor-element.elementor-element-51e96cc{--display:flex;border-style:none;--border-style:none;}.elementor-16 .elementor-element.elementor-element-36d92a8 > .elementor-widget-container{margin:0px 0px 0px 0px;border-style:solid;border-width:1px 1px 1px 1px;border-radius:10px 10px 10px 10px;}.elementor-16 .elementor-element.elementor-element-36d92a8 .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-16 .elementor-element.elementor-element-26506a0{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-around;--background-transition:0.3s;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-16 .elementor-element.elementor-element-ddba554 .elementor-button{background-color:#0500A1;font-family:"Roboto", Sans-serif;font-size:18px;font-weight:500;transition-duration:0.2s;}.elementor-16 .elementor-element.elementor-element-ddba554 .elementor-button:hover, .elementor-16 .elementor-element.elementor-element-ddba554 .elementor-button:focus{background-color:#D96F28;}.elementor-16 .elementor-element.elementor-element-ddba554 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-16 .elementor-element.elementor-element-ddba554 .elementor-button .elementor-button-content-wrapper{gap:6px;}.elementor-16 .elementor-element.elementor-element-f8d2887 .elementor-button{background-color:#0500A1;font-family:"Roboto", Sans-serif;font-size:18px;font-weight:500;transition-duration:0.2s;}.elementor-16 .elementor-element.elementor-element-f8d2887 .elementor-button:hover, .elementor-16 .elementor-element.elementor-element-f8d2887 .elementor-button:focus{background-color:#D96F28;}.elementor-16 .elementor-element.elementor-element-f8d2887 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-16 .elementor-element.elementor-element-f8d2887 .elementor-button .elementor-button-content-wrapper{gap:6px;}.elementor-16 .elementor-element.elementor-element-a5308b3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-16 .elementor-element.elementor-element-fd0df56{text-align:center;}.elementor-16 .elementor-element.elementor-element-fd0df56 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:35px;font-weight:600;color:#250075;}.elementor-16 .elementor-element.elementor-element-9df3afe{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-16 .elementor-element.elementor-element-9df3afe:not(.elementor-motion-effects-element-type-background), .elementor-16 .elementor-element.elementor-element-9df3afe > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-16 .elementor-element.elementor-element-12bbc56{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--border-radius:0px 0px 0px 0px;}.elementor-16 .elementor-element.elementor-element-cac6376 > .elementor-widget-container{border-radius:14px 14px 14px 14px;}.elementor-16 .elementor-element.elementor-element-32680f7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--border-radius:0px 0px 0px 0px;}.elementor-16 .elementor-element.elementor-element-0834165 > .elementor-widget-container{border-radius:14px 14px 14px 14px;}.elementor-16 .elementor-element.elementor-element-7ccc462{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--border-radius:0px 0px 0px 0px;}.elementor-16 .elementor-element.elementor-element-deb938a > .elementor-widget-container{border-radius:14px 14px 14px 14px;}.elementor-16 .elementor-element.elementor-element-0c6de45{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--border-radius:0px 0px 0px 0px;}.elementor-16 .elementor-element.elementor-element-43ed3d9 > .elementor-widget-container{border-radius:14px 14px 14px 14px;}.elementor-16 .elementor-element.elementor-element-6ae88de{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:16px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-16 .elementor-element.elementor-element-6ae88de:not(.elementor-motion-effects-element-type-background), .elementor-16 .elementor-element.elementor-element-6ae88de > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#002944;}.elementor-16 .elementor-element.elementor-element-a6e3995{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:-193px;}.elementor-16 .elementor-element.elementor-element-a6e3995.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-16 .elementor-element.elementor-element-4c7755a > .elementor-widget-container{margin:0px 71px 0px 0px;}.elementor-16 .elementor-element.elementor-element-4c7755a img{width:37%;opacity:1;filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );border-radius:0px 0px 0px 0px;}.elementor-16 .elementor-element.elementor-element-6d53fda{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:-86px;--margin-right:0px;--padding-top:16px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-16 .elementor-element.elementor-element-fd38004{text-align:center;}.elementor-16 .elementor-element.elementor-element-fd38004 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:30px;font-weight:600;color:#BBFF00;}.elementor-16 .elementor-element.elementor-element-4b25025{text-align:center;}.elementor-16 .elementor-element.elementor-element-4b25025 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:33px;font-weight:600;color:#FCFCFC;}.elementor-16 .elementor-element.elementor-element-fd9179e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-16 .elementor-element.elementor-element-fd9179e.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-16 .elementor-element.elementor-element-18059a3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-16 .elementor-element.elementor-element-9f9cf82{--content-width:1200px;}.elementor-16 .elementor-element.elementor-element-3e06762{--width:50%;}.elementor-16 .elementor-element.elementor-element-8e07025{--width:77%;}.elementor-16 .elementor-element.elementor-element-a5308b3{--content-width:1200px;}.elementor-16 .elementor-element.elementor-element-9df3afe{--content-width:1200px;}.elementor-16 .elementor-element.elementor-element-12bbc56{--width:26%;}.elementor-16 .elementor-element.elementor-element-32680f7{--width:26%;}.elementor-16 .elementor-element.elementor-element-7ccc462{--width:26%;}.elementor-16 .elementor-element.elementor-element-0c6de45{--width:26%;}.elementor-16 .elementor-element.elementor-element-6ae88de{--content-width:1200px;}.elementor-16 .elementor-element.elementor-element-a6e3995{--width:35.938%;}.elementor-16 .elementor-element.elementor-element-fd9179e{--width:105.714%;}}@media(max-width:767px){.elementor-16 .elementor-element.elementor-element-0d3db96{--width:500px;}}/* Start custom CSS for html, class: .elementor-element-77d9986 *//* 1. Container Style (The "Bar") */
.ticker-wrapper {
    background-color: #FF0000eb; /* Use a bright magenta/red */
    color: white;             /* Text color */
    padding: 8px 0;           /* Vertical spacing */
    overflow: hidden;         /* Hides the text outside the bar */
    white-space: nowrap;      /* Keeps the text on a single line */
    position: relative;       /* Important for positioning the text */
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
}

/* 2. Text Span Style (The content that moves) */
.ticker-wrapper span {
    display: inline-block; /* Allows the span to move */
    padding-left: 50%;    /* Starts the text fully off-screen */
    animation: marquee 20s linear infinite; /* Applies the animation (adjust speed with time) */
}

/* 3. The Scrolling Animation Keyframes */
@keyframes marquee {
    0% { transform: translate3d(0, 0, 0); } 
    100% { transform: translate3d(-100%, 0, 0); }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-cac6376 *//* Container for all cards - ensures 4 columns on desktop */
/* 1. Base Card Styling (Floating Effect) */
.course-card {
    /* --- ADD THIS LINE --- */
    background-color: #F5F2; /* Light gray color */
    
    border-radius: 12px; 
    padding: 25px;
    text-align: center;
    /* Subtle box shadow for the trendy "lifted" effect */
    border: 2px solid #dddddd; /* 1 pixel thick, solid, light gray border */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; 
}
/* ... rest of your CSS remains the same ... */
.elementor-row .elementor-column {
    padding: 15px;
}

/* 1. Base Card Styling (Floating Effect) */
.course-card {
    background-color: #fffff;
    border-radius: 12px; 
    padding: 15px;
    text-align: center;
    /* Subtle box shadow for the trendy "lifted" effect */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* Makes all cards in a row the same height */
}

/* Hover Effect (Interactive and Modern) */
.course-card:hover {
    transform: translateY(-15px); /* Lifts the card slightly */
    border: 2px solid #dddddd; /* 1 pixel thick, solid, light gray border */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
}

/* 2. Icon/Logo Styling */
.card-icon {
    margin-bottom: 15px;
}

.card-icon img {
    width: 260px; /* Adjust size of your logo/icon */
    height: auto;
}

/* 3. Typography Hierarchy */
.course-title {
    font-size: 24px;
    font-weight: 700;
    color: #333333; /* Dark color for main title */
    margin: 0 0 5px 0;
}

.course-tagline {
    font-size: 17px;
    color: #000000;
    margin-bottom: 20px;
}

/* 4. Key Facts (Duration/Time) */
.key-facts {
    background-color: #7FFF00; /* Light accent background */
    display: inline-block;
    padding: 5px 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    font-size: 17px;
    font-weight: 600;
    color: #000000; /* Accent color for text */
}

.course-description {
    font-size: 15px;
    color: #000000;
    min-height: 90px; /* Set a fixed minimum height based on the tallest description */
    
    /* Ensure the text is centered vertically if the text is short */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* 5. Modern Button Styling */
.cta-button-modern {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 12px 0;
    background-color: #7B68EE; /* Your deep purple/brand color */
    color: white;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: background-color 0.3s;
}

.cta-button-modern:hover {
    background-color: #FF0000; /* Bright Red */
    cursor: pointer; /* Ensures the hand icon appears on hover */
    color: white;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: background-color 0.3s;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0834165 *//* Container for all cards - ensures 4 columns on desktop */
/* 1. Base Card Styling (Floating Effect) */
.course-card {
    /* --- ADD THIS LINE --- */
    background-color: #F5F2; /* Light gray color */
    
    border-radius: 12px; 
    padding: 25px;
    text-align: center;
    /* Subtle box shadow for the trendy "lifted" effect */
    border: 2px solid #dddddd; /* 1 pixel thick, solid, light gray border */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; 
}
/* ... rest of your CSS remains the same ... */
.elementor-row .elementor-column {
    padding: 15px;
}

/* 1. Base Card Styling (Floating Effect) */
.course-card {
    background-color: #fffff;
    border-radius: 12px; 
    padding: 15px;
    text-align: center;
    /* Subtle box shadow for the trendy "lifted" effect */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* Makes all cards in a row the same height */
}

/* Hover Effect (Interactive and Modern) */
.course-card:hover {
    transform: translateY(-15px); /* Lifts the card slightly */
    border: 2px solid #dddddd; /* 1 pixel thick, solid, light gray border */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
}

/* 2. Icon/Logo Styling */
.card-icon {
    margin-bottom: 15px;
}

.card-icon img {
    width: 260px; /* Adjust size of your logo/icon */
    height: auto;
}

/* 3. Typography Hierarchy */
.course-title {
    font-size: 24px;
    font-weight: 700;
    color: #333333; /* Dark color for main title */
    margin: 0 0 5px 0;
}

.course-tagline {
    font-size: 17px;
    color: #000000;
    margin-bottom: 20px;
}

/* 4. Key Facts (Duration/Time) */
.key-facts {
    background-color: #7FFF00; /* Light accent background */
    display: inline-block;
    padding: 5px 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    font-size: 17px;
    font-weight: 600;
    color: #000000; /* Accent color for text */
}

.course-description {
    font-size: 15px;
    color: #000000;
   min-height: 90px; /* Set a fixed minimum height based on the tallest description */
    
    /* Ensure the text is centered vertically if the text is short */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* 5. Modern Button Styling */
.cta-button-modern {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 12px 0;
    background-color: #7B68EE; /* Your deep purple/brand color */
    color: white;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: background-color 0.3s;
}

.cta-button-modern:hover {
    background-color: #FF0000; /* Bright Red */
    cursor: pointer; /* Ensures the hand icon appears on hover */
    color: white;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: background-color 0.3s;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-deb938a *//* Container for all cards - ensures 4 columns on desktop */
/* 1. Base Card Styling (Floating Effect) */
.course-card {
    /* --- ADD THIS LINE --- */
    background-color: #F5F2; /* Light gray color */
    
    border-radius: 12px; 
    padding: 25px;
    text-align: center;
    /* Subtle box shadow for the trendy "lifted" effect */
    border: 2px solid #dddddd; /* 1 pixel thick, solid, light gray border */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; 
}
/* ... rest of your CSS remains the same ... */
.elementor-row .elementor-column {
    padding: 15px;
}

/* 1. Base Card Styling (Floating Effect) */
.course-card {
    background-color: #fffff;
    border-radius: 12px; 
    padding: 15px;
    text-align: center;
    /* Subtle box shadow for the trendy "lifted" effect */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* Makes all cards in a row the same height */
}

/* Hover Effect (Interactive and Modern) */
.course-card:hover {
    transform: translateY(-15px); /* Lifts the card slightly */
    border: 2px solid #dddddd; /* 1 pixel thick, solid, light gray border */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
}

/* 2. Icon/Logo Styling */
.card-icon {
    margin-bottom: 15px;
}

.card-icon img {
    width: 260px; /* Adjust size of your logo/icon */
    height: auto;
}

/* 3. Typography Hierarchy */
.course-title {
    font-size: 24px;
    font-weight: 700;
    color: #333333; /* Dark color for main title */
    margin: 0 0 5px 0;
}

.course-tagline {
    font-size: 17px;
    color: #000000;
    margin-bottom: 20px;
}

/* 4. Key Facts (Duration/Time) */
.key-facts {
    background-color: #7FFF00; /* Light accent background */
    display: inline-block;
    padding: 5px 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    font-size: 17px;
    font-weight: 600;
    color: #000000; /* Accent color for text */
}

.course-description {
    font-size: 15px;
    color: #000000;
    min-height: 80px; /* Ensures space if descriptions vary */
}

/* 5. Modern Button Styling */
.cta-button-modern {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 12px 0;
    background-color: #7B68EE; /* Your deep purple/brand color */
    color: white;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: background-color 0.3s;
}

.cta-button-modern:hover {
    background-color: #FF0000; /* Bright Red */
    cursor: pointer; /* Ensures the hand icon appears on hover */
    color: white;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: background-color 0.3s;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-43ed3d9 *//* Container for all cards - ensures 4 columns on desktop */
/* 1. Base Card Styling (Floating Effect) */
.course-card {
    /* --- ADD THIS LINE --- */
    background-color: #F5F2; /* Light gray color */
    
    border-radius: 12px; 
    padding: 25px;
    text-align: center;
    /* Subtle box shadow for the trendy "lifted" effect */
    border: 2px solid #dddddd; /* 1 pixel thick, solid, light gray border */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; 
}
/* ... rest of your CSS remains the same ... */
.elementor-row .elementor-column {
    padding: 15px;
}

/* 1. Base Card Styling (Floating Effect) */
.course-card {
    background-color: #fffff;
    border-radius: 12px; 
    padding: 15px;
    text-align: center;
    /* Subtle box shadow for the trendy "lifted" effect */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* Makes all cards in a row the same height */
}

/* Hover Effect (Interactive and Modern) */
.course-card:hover {
    transform: translateY(-15px); /* Lifts the card slightly */
    border: 2px solid #dddddd; /* 1 pixel thick, solid, light gray border */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
}

/* 2. Icon/Logo Styling */
.card-icon {
    margin-bottom: 15px;
}

.card-icon img {
    width: 260px; /* Adjust size of your logo/icon */
    height: auto;
}

/* 3. Typography Hierarchy */
.course-title {
    font-size: 24px;
    font-weight: 700;
    color: #333333; /* Dark color for main title */
    margin: 0 0 5px 0;
}

.course-tagline {
    font-size: 17px;
    color: #000000;
    margin-bottom: 20px;
}

/* 4. Key Facts (Duration/Time) */
.key-facts {
    background-color: #7FFF00; /* Light accent background */
    display: inline-block;
    padding: 5px 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    font-size: 17px;
    font-weight: 600;
    color: #000000; /* Accent color for text */
}

.course-description {
    font-size: 15px;
    color: #000000;
    min-height: 80px; /* Ensures space if descriptions vary */
}

/* 5. Modern Button Styling */
.cta-button-modern {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 12px 0;
    background-color: #7B68EE; /* Your deep purple/brand color */
    color: white;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: background-color 0.3s;
}

.cta-button-modern:hover {
    background-color: #FF0000; /* Bright Red */
    cursor: pointer; /* Ensures the hand icon appears on hover */
    color: white;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: background-color 0.3s;
}/* End custom CSS */