body {
    background-color: #11151a;

}

.header {
    font-family: 'Poppins', sans-serif;
    font-size: 90px;
    color: #fff;
    position: absolute;
    top: 400px;
    left: 0%;
    width: 100%;
    text-align: center;
}

.line-1 {
    background-color: #333333;
    width: 2px;
    height: 400px;
    position: absolute;
    top: 600px;
    left: 49.9%;
    transition: background-color 0.2s ease-in-out;
}

.header-1 {
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    color: #fff;
    position: absolute;
    top: 1050px;
    left: 0%;
    width: 100%;
    text-align: center;
}

.line-2 {
    background-color: #333333;
    width: 2px;
    height: 400px;
    position: absolute;
    top: 1750px;
    left: 49.9%;
    transition: background-color 0.2s ease-in-out;
}

.header-2 {
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    color: #fff;
    position: absolute;
    top: 2200px;
    left: 0%;
    width: 100%;
    text-align: center;
}

.header-2-line {
    background-color: #11151a;
    width: 86%;
    height: 40px;
    border-style: solid;
    border-width: 2px;
    border-bottom: 0px;
    border-color: #333333; 
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    position: absolute;
    top: 2350px;
    left: 7%;
    transition: border-color 0.5s ease-in-out; 
}

.card-1, .card-2, .card-3, .card-4, .card-5, .card-6, .card-7, .card-8, .card-9, .card-10, .card-11, .card-12, .card-13, .card-14, .card-15, .card-16, .card-17, .card-18, .card-19, .card-20, .card-21, .card-22, .card-23, .card-24, .card-25, .card-26, .card-27, .card-28, .card-29, .card-30 {
    background-color: #11151a;
    width: 16%;
    height: 450px;
    border-style: solid;
    border-width: 1px;
    border-color: #333333;
    border-radius: 10px;
    position: absolute;
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    transition: all .3s ease-in-out;
    cursor: default;
}


.card-1 { 
    top: 1200px;
    left: 32%;
}

.card-2 { 
    top: 1200px;
    left: 52%;
}

.card-3 { 
    top: 2450px;
    left: 12%;
}

.card-4 { 
    top: 2450px;
    left: 32%;
}

.card-5 { 
    top: 2450px;
    left: 52%;
}

.card-6 { 
    top: 2450px;
    left: 72%;
}

.card-7 { 
    top: 2950px;
    left: 12%;
}

.card-8 { 
    top: 2950px;
    left: 32%;
}

.card-9 { 
    top: 2950px;
    left: 52%;
}

.card-10 { 
    top: 2950px;
    left: 72%;
}

.card-11 { 
    top: 3450px;
    left: 12%;
}

.card-12 { 
    top: 3450px;
    left: 32%;
}

.card-13 { 
    top: 3450px;
    left: 52%;
}

.card-14 { 
    top: 3450px;
    left: 72%;
}



.card-1:hover, .card-2:hover, .card-3:hover, .card-4:hover, .card-5:hover, .card-6:hover, .card-7:hover, .card-8:hover, .card-9:hover, .card-10:hover, .card-11:hover, .card-12:hover, .card-13:hover, .card-14:hover, .card-15:hover, .card-16:hover, .card-17:hover, .card-18:hover, .card-19:hover, .card-20:hover, .card-21:hover, .card-22:hover, .card-23:hover, .card-24:hover, .card-25:hover, .card-26:hover, .card-27:hover, .card-28:hover, .card-29:hover, .card-30:hover {
    box-shadow: 1px 1px 2px black, 0 0 25px #7C40FF, 0 0 5px #7C40FF;
}

.card-1 img, .card-2 img, .card-3 img, .card-4 img, .card-5 img, .card-6 img, .card-7 img, .card-8 img, .card-9 img, .card-10 img, .card-11 img, .card-12 img, .card-13 img, .card-14 img, .card-15 img, .card-16 img, .card-17 img, .card-18 img, .card-19 img, .card-20 img, .card-21 img, .card-22 img, .card-23 img, .card-24 img, .card-25 img, .card-26 img, .card-27 img, .card-28 img, .card-29 img, .card-30 img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    position: absolute;
    top: 40px;
}

.card-1 h1, .card-2 h1, .card-3 h1, .card-4 h1, .card-5 h1, .card-6 h1, .card-7 h1, .card-8 h1, .card-9 h1, .card-10 h1, .card-11 h1, .card-12 h1, .card-13 h1, .card-14 h1, .card-15 h1, .card-16 h1, .card-17 h1, .card-18 h1, .card-19 h1, .card-20 h1, .card-21 h1, .card-22 h1, .card-23 h1, .card-24 h1, .card-25 h1, .card-26 h1, .card-27 h1, .card-28 h1, .card-29 h1, .card-30 h1 {
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    font-weight: 100;
    font-size: 24px;
    position: absolute;
    top: 200px;
    color: #fff;
}

.card-1 h2, .card-2 h2, .card-3 h2, .card-4 h2, .card-5 h2, .card-6 h2, .card-7 h2, .card-8 h2, .card-9 h2, .card-10 h2, .card-11 h2, .card-12 h2, .card-13 h2, .card-14 h2, .card-15 h2, .card-16 h2, .card-17 h2, .card-18 h2, .card-19 h2, .card-20 h2, .card-21 h2, .card-22 h2, .card-23 h2, .card-24 h2, .card-25 h2, .card-26 h2, .card-27 h2, .card-28 h2, .card-29 h2, .card-30 h2 {
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    font-weight: 100;
    font-size: 16px;
    position: absolute;
    top: 240px;
    color: #ececec;
}


.branch {
    list-style: none;
    display: flex;
    flex-wrap: wrap; 
    width: 90%;
    position: absolute;
    top: 280px;
    left: -20px;
}

.branch li {
    font-family: monospace;
    border-radius: 5px;
    color: white;
    font-size: 12px;
    text-align: center;
    margin-left: 10px;
    margin-bottom: 10px; 
    padding: 5px 10px; 
}

#cs {
    background: linear-gradient(to right, #6a3093, #a044ff);
    height: 20px;
    width: 150px;
    padding-top: 10px;
}

#it {
    background: linear-gradient(to right, #0059ff, #2a5298);
    height: 20px;
    width: 50px;
    padding-top: 10px;
}

#ec {
    background: linear-gradient(to right, #B24592, #F15F79);
    height: 20px;
    width: 230px;
    padding-top: 10px;
}

#ce {
    background: linear-gradient(to right, #0059ff, #a044ff);
    height: 20px;
    width: 150px;
    padding-top: 10px;
}

#se {
    background: linear-gradient(to right, #ff0000, #447cff);
    height: 20px;
    width: 150px;
    padding-top: 10px;
}

#arc {
    background: linear-gradient(to right, #00ff2a, #a044ff);
    height: 20px;
    width: 150px;
    padding-top: 10px;
}


.social-media {
    position: absolute;
    top: 340px;
    right: 60px;
    display: flex;
    gap: 40px; 
    list-style: none;
}

.social-media img {
    width: 30px; 
    height: 30px;
    transition: transform 0.3s ease-in-out;
    border-radius: 0px;
    cursor: pointer;
}

.social-media img:hover {
    transform: scale(1.2); 
}



.footer {
    position: absolute;
    top: 6000px;
    left: 0%;
}