body {
    font-family: 'Roboto', sans-serif !important;
    color: #333;;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700 !important;   
}

p, ul {
    font-size: 1.2rem;
}

.container {
    max-width: 800px !important;
}

.card {
    border-radius: 0 !important;
}

/* Course Layout */
.course__fullwidthcontainer {
    display: none;
    margin-bottom: 0;
}

.course {
    padding: 0;
}

.course__header, .course__contentcontainer {
    max-width: 100% !important;
}

.course__header, .instructionspanel, .course__price, .course__checkout {
    display: none;
}

.course__content {
    margin: 0;
}

.lead {
    font-weight: thinner !important;
}

#course__hero .lead {
    max-width: 48ch !important;
}

/* Triangle Spacer Styles */
.triangle-spacer {
    height: 4vw;
    width: 100%;
    position: relative;
    z-index: 3;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    margin-top: -1px;
}

.triangle-spacer.inverse {
    transform: rotate(180deg);
    margin-bottom: -1px;
}

.triangle-spacer.inverseY {
    transform: rotate(180deg) scaleY(-1);
}

.triangle-spacer.bottom {
    transform: scaleY(-1);
}

/* Curriculum Module Styles */
.curriculum-module {
    border-left: 4px solid #1d365c;
    padding-left: 20px;
    margin-bottom: 30px;
}

.pricing-amount {
    font-size: 2rem !important;
    font-weight: bold !important;
}

.pricing-period {
    font-size: 1rem !important;
    font-weight: normal !important;
}

/* Custom Button Styles */
.btn-primary {
    border: none !important;
    font-weight: 700 !important;
}

.pink.btn-primary:hover {
    background-color: #d6055e !important;
}

.gold.btn-primary:hover {
    background-color: #f6be50 !important;
}

.btn-secondary:hover {
    background-color: #274a7e !important;
}

/* Color Utility Classes */
.text-light {
    color: #ffffff !important;
}
.text-brand-blue {
    color: #1d365c !important;
}
.text-dark-alt {
    color: #2c2c2c !important;
}
.text-gold {
    color: #ffda74 !important;
}
.white {
    background-color: #ffffff !important;
}
.blue {
    background-color: #1D365C !important;
}
.light-blue {
    background-color: #caecff !important;
}
.light-gray {
    background-color: #ededed !important;
}
.pink {
    background-color: #ea0567 !important;
}
.gold {
    background-color: #ffda74ef !important;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Sub navigation hover effect */
.nav-topic:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.series__hero {
    height: 250px;
    width: 100%;
    position: relative;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Sub navigation hover effect */
.nav-topic:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Video preview hover effects */
.cursor-pointer {
    cursor: pointer;
}

.cursor-pointer:hover .bg-white {
    transform: scale(1.1);
    background-color: rgba(255, 255, 255, 1) !important;
}

.cursor-pointer:hover {
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* Testimonial carousel indicators */
#testimonialCarousel {
    min-height: 400px !important;
    position: relative !important;
}

.carousel-indicators {
    position: absolute !important;
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    width: auto !important;
    z-index: 10 !important;
}

.carousel-indicators button {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    margin: 0 6px !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    border: 2px solid white !important;
    opacity: 1 !important;
}

.carousel-indicators button.active {
    background-color: #F1CD67 !important;
}

#testimonialCarousel .carousel-indicators button.active {
    background-color: #F1CD67 !important;
    transform: scale(1.2);
    transition: all 0.3s ease;
}

#testimonialCarousel .carousel-indicators button:hover {
    background-color: rgba(241, 205, 103, 0.8) !important;
    transform: scale(1.1);
}

/* Quote symbol as CSS pseudo-element */
.testimonial-quote {
    position: relative;
    padding-left: 80px; /* Make room for the quote symbol */
    text-align: left !important; /* Force left alignment */
}

.testimonial-quote::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 52px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 138' fill='none'%3E%3Cpath d='M63.3605 138H0V92.3783C0 73.9178 1.57838 59.3914 4.73513 48.7993C8.0422 38.0559 14.0551 28.4474 22.7737 19.9737C31.4924 11.5 42.6162 4.84211 56.1451 0L68.5466 26.3289C55.9196 30.5658 46.8252 36.4671 41.2633 44.0329C35.8517 51.5987 32.9956 61.6612 32.6949 74.2204H63.3605V138ZM154.814 138H91.4534V92.3783C91.4534 73.7664 93.0317 59.1645 96.1885 48.5724C99.4956 37.9803 105.508 28.4474 114.227 19.9737C123.096 11.5 134.22 4.84211 147.598 0L160 26.3289C147.373 30.5658 138.279 36.4671 132.717 44.0329C127.305 51.5987 124.449 61.6612 124.148 74.2204H154.814V138Z' fill='%23F1CD67'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.bg-primary { background-color: #1D365C !important; }
.bg-success { background-color: #28a745 !important; }
.bg-warning { background-color: #F1CD67 !important; }

/* Responsive adjustments for testimonial carousel */
@media (max-width: 767px) {
  #testimonialCarousel .testimonial-card {
    min-height: 400px !important;
  }
}

@media (max-width: 450px) {
  #testimonialCarousel .testimonial-card {
    padding-top: 100px !important;
  }
  
}

@media screen and (max-width: 768px) {
    #program-highlights .ratio, #instructors .ratio {
        aspect-ratio: 3/2 !important;
        --bs-aspect-ratio: 50% !important;
        margin-bottom: 2rem !important;
    }
    #program-highlights img {
        max-height: 200px !important;
    }

    .u-headingdialog .publiclogin__heading {
        font-size: 24px;
    }
    .pricing-section .col-sm-12 {
        margin-bottom: 2rem;
    }
}