*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

#main{
    background-image:url("mainphoto.jpg");
    background-repeat:no-repeat;
    background-size:100% 100%;
    border-radius: 0 0 25px 25px;
    height:640px;
    display:flex; 
    align-items:center;
    justify-content:flex-start;
    padding-left:50px;
}
.main-content{
    margin-top:10px;
}
.main-content h1{
    color:white;
    text-shadow: 1px 5px 4px #000;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align:left;
    font-size:2.5rem;
    padding:20px 100px 0 10px;
}
.main-content h2{
    color:white;
     text-shadow: 1px 5px 4px #000;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size:3rem;
    text-align:left;
    padding:0 100px 2px 10px;
}
.main-content p{
    font-size:24px;
    color:white;
    padding:20px 100px 2px 10px;

}
.btn{
    display:inline-block;
    background-color: #ffeda2;
    color:#170505;
    margin-top:20px;
    padding:14px 22px;
    text-decoration: none;
    font-weight:bold;
    font-size:20px;
    border-radius:6px;
    transition:0.3s;
}
.btn:hover{
    background-color: rgb(216, 244, 167);;
}
#intro{
    background-color:white ;
    color:rgb(29, 156, 207);
    text-align:center;
    max-width: 1000px; 
    margin: 20px auto ;
    padding: 20px;
}
.intro-content h1{
    font-size: 2rem;
    margin-top: 5rem;
    margin-bottom: 2rem;
    color:rgb(14, 134, 174);
     text-shadow: 1px 5px 4px #e7cfcf;
}
.intro-content p{
    font-size: 25px;
    font-weight:300px ;
    opacity: 0.9;
    margin-top:3rem;
    margin-bottom:5rem;
}
#aim{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 40px 10%;
    margin:2em;
}
.aim-content h2{
    text-align:center;
   margin:1rem;
   color:rgb(29, 156, 207);
   font-weight: 700;
   font-style: normal;
}
.aim-content p{
    color:rgb(29, 156, 207);
    font-weight: 300px;
    font-size:20px;
}
.advantages-section{
    background-color:skyblue;
    display:flex;
    align-items: center;
    flex-direction:row;
    justify-content:center;
    gap:2rem;
    margin:40px auto;
    max-width:1500px;
    height:800px;
}
.image-container img{
    height:auto;
    width:650px;
    box-shadow:0px 6px 20px rgba(0,0,0,0.3);
    border-radius: 10px;
    margin-left:40px;
    margin-right:6rem;
    margin-top:30px;
}
.advantages-container figure{
    text-align:center;
}  

.advantages-container figcaption{
    color:white;
    text-align: center;
    font-weight:bold;
    font-family: Arial, Helvetica, sans-serif;
    margin-top:2rem;
    margin-bottom:1rem;
}
.text-container {
    flex: 1; 
    max-width:500px;
    text-align:left;
    height:auto;
}

.text-container h2 {
    color:white;
    margin-bottom: 15px;
    text-align: center;
    margin-bottom:50px;
    height:200%;
}

.text-container p {
    color:white;
    font-size: 25px;
    font-weight:300px;
    opacity: 0.9;
    margin-top:3rem;
    padding-left: 20px;
    width:500px;
    margin:0;
}
.support-container{
    display:flex;
    align-items:flex-start;
    /* flex: 1;  */
    max-width:700px;
    height:auto;
}

.support-container p {
    color:rgb(1, 114, 201);
    text-align:left;
    font-size: 25px;
    font-weight:300;
    opacity: 0.9;
    padding-left: 100px;
    width:1000;
    margin:200px 0 100px 100px;
    
}
    
.support-image-container img{
    height:auto;
    width:650px;
    border-radius: 10px;
    float:right;
    margin:50px 0 20px 30px;
}

.curriculum-container{
    padding:2rem;
    margin:80px 20px 30px 20px; 
}
.curriculum-container h2{
    color:rgb(1, 114, 201);
    align-items:center;
    text-align:center;
    margin:100px 0 60px 0;
    font-size:30px;
}


.carousel {
    display: flex;
    gap: 40px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 20px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.card {
    width: 300px;
    height: 300px;
    border-radius: 16px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    padding-bottom: 15px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}

.text-box {
    width: 85%;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.4s ease;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 12px;
    background: rgba(0,0,0,0.35);
    color: #e5da11;
}

.card:hover .text-box {
    opacity: 1;
    transform: translateY(0);
}

.title {
    font-size: 22px;
    margin-bottom: 5px;
    }

.subtitle {
    font-size: 15px;
    font-weight: normal;
    opacity: 0.9;
} 

    /* Carousel Card Images */
.card1 { background-image: url("Introduction to Information Security.jpg"); }
.card2 { background-image: url("Introduction to Cybercrime and Digital Forensics.jpg"); }
.card3 { background-image: url("information security policy.jpg"); }
.card4 { background-image: url("Global Cooperation in Cybersecurity.jpg"); }
.card5 { background-image: url("Cyber Risk and Incident Response.jpg"); }
.card6 { background-image: url("network security.jpg"); }
.card7 { background-image: url("system security.jpg"); }
.card8 { background-image: url("basic korean language.jpg"); }





.apply-section {
    text-align: center;
    margin: 50px auto;
    background-color: skyblue;
    height:500px;
}
.apply-header{
    margin-top: 100px;
} 

.apply-section .apply-header h2{
    color:white;
    font-size:30px;
    margin:50px 0 20px 0;
    padding-top:50px;
} 
.apply-header p{
    color:white;
    margin-bottom:30px;
    font-size:25px;
    
}

.apply-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    justify-items: center;
    max-width: 1000px;
    margin:auto;
}

.apply-box {
    background: white;
    border: 1px solid #ddd;
    border-radius: 15px;
    margin-top:50px;
    margin-bottom:10px;
    padding: 20px;
    width: 250px;
    box-shadow: 0px 6px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.apply-box:hover {
    transform: translateY(-8px);
    box-shadow: 0px 10px 25px rgba(0,0,0,0.5);
} 

.apply-box img {
    width: 120px;
    height: 90px;
    margin-bottom: 15px;
}

.apply-box p {
    font-size: 20px;
    color: rgb(29,156,207);
}




#applying-container{
    
    background: white;
    color: #1d9ccf;
    text-align: center;
    max-width: 1300px;
    margin: 100px auto;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0px 6px 20px rgba(0,0,0,0.1);

}
.image-card img{
    width:400px;
    height:300px;
    object-fit: cover;
    border-radius:90px 0px 90px 0px;
    float:right;
    margin-top:50px;
}

.text h2{
    margin-bottom:50px;
    font-size:30px;
    
}
.text ul li{
    margin-left:0px;
    font-size: 25px;
    line-height: 1.6;
    list-style:inside;
    width:800px;
}



footer{
    height:200px;
    margin-top:100px;
    padding:1rem;
    color:rgb(255, 255, 255);
    background-color:skyblue ;
}
footer p{
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    font-size: 25px;
    font-weight:200px;
    line-height:30px;
    margin-block:10px;
}
footer a{
    text-decoration: none;
    color:#073760;
}
.ending .left{
    text-align:left;
}
.ending .center{
    text-align:center;
}
.ending .right{
    text-align:right;
}
.ending .right span{
    color:#073760;
}
.ending .left a:hover{
    color: #da2a50;
}
.ending .center a:hover{
    color: #da2a50;
}
.ending{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:50px;
}