@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
.profile {
    width: 40px; /* Adjust the size as needed */
    height: 40px; /* Must be the same as width to maintain circle */
    border-radius: 50%; /* This creates the circle effect */
    object-fit: cover; /* Ensures the image covers the entire area */
    /* Optional: Add a border for better visibility */
    border: 1px solid #ddd;
}

.list-style-none {
    list-style: none;
}
.w-11r {
    max-width: 11rem;
    margin: auto;
    height: 85px;
    width: 85px;
}
.w-260 {
    width: 260px;
}
.active {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: #f03d36;
    text-decoration-thickness: 3px;
}
.container-form {
    margin-top: 10px;
    border-radius: 4px;
    background-color: var(--mainColor);
}
.border-top-form {
    border-top: 3px solid #0165fc;
    border-radius: 5px;
}
.btn-enroll {
    background: radial-gradient(
        circle at 10% 20%,
        rgb(255, 197, 118) 0%,
        rgb(254, 106, 103) 47.7%,
        rgb(240, 23, 23) 92.3%
    );
    width: 120px;
    border: none;
    color: #fff;
    border-radius: 5px;
}
.btn-enroll:hover {
    background: radial-gradient(
        circle at 10% 20%,
        rgb(255, 197, 118) 0%,
        rgb(254, 106, 103) 47.7%,
        rgb(240, 23, 23) 92.3%
    );
    width: 120px;
    border: none;
    color: #fff;
}
.bg-main {
    background-image: url("/assets/images/cover-final.png");
    background-size: cover; /* Cover the entire container */
    background-position: center; /* Center the image */
    height: 90vh;
    width: 100%; /* Full width */
}
.banner-content {
    display: grid;
    place-items: center;
    height: 70vh;
}
.text-main {
    font-weight: 800;
    color: #f03d36;
}
.course-text {
    color: #000;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: #f03d36;
    text-decoration-thickness: 2px;
}
#footer {
    padding: 40px;
    color: #000;
    margin-top: auto;
}
.footer-logo {
    width: 100px; /* Adjust to the desired display size */
    height: auto;
}
.space {
    letter-spacing: 1px;
    padding-bottom: 10px;
}
.icon {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
}
.links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.about-text {
    font-weight: 600;
    font-size: 35px;
    padding: 20px;
}
.text-mission {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: #f03d36;
    text-decoration-thickness: 3px;
}
.content-about {
    margin: 40px;
    text-align: center;
}
.s-info {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: #f03d36;
    text-decoration-thickness: 3px;
}

.course-header {
    font-weight: 600;
    font-size: 35px;
    padding: 20px;
}
.box-shadow-card {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.box-shadow {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.bg-header-form {
    background-color: #f03d36;
    color: #fff;
    border-radius: 5px;
}
.border-form {
    border: 1px solid #cfcece;
    padding: 10px;
    border-radius: 5px;
}