:root{
    --primary-color: #002147;
    --secondary-color: #FDC801;
    --red-color: #E52A3D;
    --green-color: #61CE70;
    --white-color: #fff;
    --black-color: #333;
}

#header{
    background: var(--primary-color);
    color: var(--white-color);
    padding: 30px 0 80px 0;
}

.btn-theme-primary{
    background: var(--secondary-color);
    border: 0;
    padding: 10px 34px;
    text-transform: uppercase;
    border-radius: 10px;
}

.tag{
    background: var(--white-color);
    color: var(--secondary-color);
    padding: 10px;
    width: 500px;
    text-align: center;
    border-radius: 200px;
}

.main-heading{
    font-size: 36px;
    font-weight: 700;
}

.main-heading span{
    color: var(--secondary-color);
}

.logoSwiper {
    padding: 40px 0;
    background: var(--white-color);
}

.logoSwiper .swiper-wrapper{
    display: flex;
    align-items: center;
}

.logoSwiper .swiper-slide {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logoSwiper img {
    max-width: 120px;
    /* filter: grayscale(100%); */
    transition: 0.3s;
}

.logoSwiper img:hover {
    filter: grayscale(0%);
    transform: scale(1.1);
}

.course-section {
    max-width: 900px;
    margin: 20px auto;
    font-family: 'Poppins', sans-serif;
}

.course-section h2 {
    text-align: center;
    margin-bottom: 30px;
}

.accordion {
    background-color: #f4f6ff;
    color: #333;
    cursor: pointer;
    padding: 18px 20px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    border-radius: 8px;
    transition: 0.3s;
}

.accordion:hover {
    background-color: #e0e5ff;
}

.panel {
    background-color: #ffffff;
    overflow: hidden;
    display: none;
    padding: 0 20px 20px 20px;
    border-radius: 0 0 8px 8px;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.panel ul {
    margin-top: 15px;
}

.panel ul li {
    margin-bottom: 8px;
}

#enroll{
    background: var(--primary-color);
    color: var(--white-color);
}

.top{
    display: flex;
    justify-content: space-between;
    background: var(--primary-color);
    color: var(--white-color);
    padding: 10px;
    border-radius: 10px 10px 0 0;
}

@media screen and (max-width: 600px) {
    .tag{
        width: 90vw;
        margin-left: 50%;
        transform: translateX(-50%);
    }

    .main-heading, h2{
        font-size: 30px;
        text-align: center;
    }

    #header h5{
        font-weight: 400;
        font-size: 20px;
        text-align: center;
    }

    #header p{
        text-align: center;
    }
}