body {
margin: 0;
font-family: sans-serif;
background-color: #f4f4f4;
}

/* h1, h2 {
color: #2c3e50;
}*/
ul {
list-style-type: square;
margin-left: 20px;
}
.enroll-btn {
display: inline-block;
padding: 10px 20px;
background-color: #3498db;
color: white;
text-decoration: none;
border-radius: 5px;
margin-top: 20px;
}
.enroll-btn:hover {
background-color: #2980b9;
}
.custom-select {
position: relative;
display: inline-block;
width: 250px;
}

select {
display: inline-block;
width: 100%;
padding: 12px 16px;
font-size: 16px;
color: #333;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 8px;
appearance: none; /* Removes default arrow */
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
transition: all 0.3s ease;
}

select:hover {
border-color: #007bff; /* Highlight on hover */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

select:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Custom arrow */
.custom-select::after {
content: "▼";
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
font-size: 14px;
color: #666;
pointer-events: none; /* Prevent interaction */
}


nav {
display: flex;
justify-content: center;
gap: 20px;
/*background-color: #004494;*/
padding: 20px 0;
}
nav a {
text-decoration: none;
font-size: 16px;
}
nav a:hover {
text-decoration: underline;
}
.hero {
display: flex;
justify-content: center;
align-items: center;
height: 400px;
background-size: cover;
background-position: center;
color: white;
text-shadow: 2px 2px 8px #000;
font-size: 32px;
text-align: center;
}
.content {
padding: 20px;
}
.cta {
display: flex;
justify-content: center;
gap: 20px;
margin: 20px 0;
}
.cta a {
padding: 10px 20px;
background-color: #007bff;
color: white;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
}
.cta a:hover {
background-color: #0056b3;
}
footer {
text-align: center;font-style:italic;
padding: 10px 0;
/* background-color: #004494;	
color: white;*/
}
#title{
font-style:Georgia;fantasy;
}

body { font-family: Arial, sans-serif; background: #f2f2f2; padding: 40px; }
.container { background: #fff; padding: 30px; max-width: 600px; margin: auto; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
h2 { color: #2a7ae2; }
input, textarea { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 4px; }
button { background: #2a7ae2; color: white; padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; }
button:hover { background: #1a5cbf; }
.message { padding: 10px; margin-bottom: 15px; border-radius: 5px; }
.success { background-color: #d4edda; color: #155724; }
.error { background-color: #f8d7da; color: #721c24; }

/*body {
min-height: 100vh;
background-color: hsl(0, 0%, 95%);
font-size: 15px;
font-family: 'Lexend Deca', sans-serif;
/*color: hsla(0, 0%, 100%, 0.75);*/
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;

}*/
#logo{
width:5%;
}
body{
background:steelblue;
}
.container{
background:lavender;
}


body {
font-family: 'Roboto', sans-serif;
background-color: #f4f6f8;
margin: 0;
padding: 0;
color: #333;
}
header {
background-color: lightsteelblue;
color: white;
padding: 20px;
text-align: center;



}

.course {
background: white;
padding: 20px;
margin-bottom: 20px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
font-size:12px;font-weight:bold;
}
h2 {
color: #2980b9;
}
ul {
line-height: 1.8;
}
.contact-box {
background: #ecf0f1;
padding: 20px;
border-radius: 8px;
}
form {
display: flex;
flex-direction: column;
}
input, textarea, button {
margin-top: 10px;
padding: 10px;
font-size: 1rem;
}
button {
background-color: #27ae60;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #219150;
}
.radio-group {
display: flex;
gap: 10px;
margin-top: 10px;
}
.register-banner {
position: absolute;
top: 10px;
right: 20px;
color: white;
font-weight: bold;
}
.login-banner {
position: absolute;
top: 10px;
right: 20px;
color: white;
font-weight: bold;
}
.registration-form {
position: absolute;
top: 100px;
right: 20px;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
width: 200px;
background:darkgrey;
}
.registration-form h2 {
font-size: 1.2rem;
margin-top: 0;
color: #2c3e50;
}


.message {
padding: 10px;
margin-top: 15px;
border-radius: 5px;
text-align: center;
}
.success {
background-color: #d4edda;
color: #155724;
}
.error {
background-color: #f8d7da;
color: #721c24;
}


</style>



<style>
#google_translate_element {
transform: scale(0.8);
transform-origin: top left;
}

.goog-te-combo {
font-size: 12px !important;
padding: 2px !important;
height: auto !important;
}
</style>
<style> .faq-item {
margin-bottom: 15px;
}
.faq-item h3 {
margin-bottom: 5px;
}</style>
<style>
body {
margin: 0;
font-family: sans-serif;
background-color: #f4f4f4;
}

.banner-container {
max-width: 100%;
margin: 20px auto;
padding: 8px;
background: linear-gradient(135deg, #4facfe, #00f2fe); /* Border gradient */
border-radius: 20px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
overflow: hidden;
}

.banner-image {
width: 100%;
height: auto;
display: block;
border-radius: 15px;
transition: transform 0.3s ease;
}

.banner-image:hover {
transform: scale(1.02); /* slight zoom on hover */
}
.career-path {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #ddd;
}
.career-path h2 {
color: #333;
font-size: 20px;
margin-bottom: 10px;
}
.career-path p {
color: #555;
margin-left: 10px;
}
.footer-note {
text-align: center;
margin-top: 40px;
font-style: italic;
color: #666;
}
/*body { font-family: Arial, sans-serif; background: #f2f2f2; padding: 40px; }
.container { background: #fff; padding: 30px; max-width: 600px; margin: auto; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
h2 { color: #2a7ae2; }
input { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 4px; }
button { background: #2a7ae2; color: white; padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; }
button:hover { background: #1a5cbf; }*/
.message {
padding: 10px;
margin-top: 15px;
border-radius: 5px;
text-align: center;
}
.success {
background-color: #d4edda;
color: #155724;
}
.error {
background-color: #f8d7da;
color: #721c24;
}


   body {
            font-family: Arial, sans-serif;
            background: #f8f9fa;
            padding: 20px;
        }
        .lesson-box {
            background: lightsteelblue;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        .lesson-box h2 {
            margin-top: 0;
            color: #333;
        }
        iframe, video {
            width: 100%;
            max-width: 700px;
            border-radius: 8px;
            margin-top: 10px;
        }
        .btn {
            display: inline-block;
            padding: 10px 15px;
            margin-top: 10px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 6px;
            text-decoration: none;
        }
        .btn:hover {
            background: #0056b3;
        }