:root {
    --primary: #111;
    --secondary: #A6D1E6;
    --bg: #F0F8FF;
    --border: #aaa;
    --swiper-navigation-color: #fe1c6f; /* Replace with your desired color */
}

.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    width: 100%;
    padding: 0 50px;
    font-size: 1.5em;
}

    .top .links a {
        text-decoration: none;
        color: var(--primary);
        transition: .5s;
    }

        .top .links a:hover {
            color: var(--theme-color);
        }

    .top .head {
        font-weight: 600;
    }

        .top .head span {
            color: var(--theme-color);
        }

    .top .search i {
        transition: .5s;
        padding-right: 10px;
    }

        .top .search i:hover {
            color: var(--theme-color);
            cursor: pointer;
        }

    .top .search .hamburger {
        display: none;
    }

.header {
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    /*z-index: 1000;*/
    background: #fff;
}

    .header .navigation {
        display: flex;
        justify-content: center;
        align-items: center;
        list-style: none;
        position: relative;
    }

        .header .navigation li a {
            text-decoration: none;
            color: var(--primary);
            padding: 5px 40px;
            transition: .3s ease-in-out;
            border-bottom: 2px solid #fff;
            left: 0;
        }

            .header .navigation li a:hover {
                border-bottom: 2px solid var(--secondary);
            }

.banner {
    margin: 20px 0px;
}

    .banner swiper-container {
        width: 100%;
        height: 80vh;
    }

swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

    swiper-slide .imgbx img {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(50%)
    }

    swiper-slide .text {
        position: absolute;
        color: #fff;
        top: 70%;
    }

section {
    padding: 40px 30px;
}

.news {
    text-align: center;
}

    .news .titletext {
        text-align: center;
        font-size: 2em;
        padding-bottom: 40px;
    }

        .news .titletext span {
            color: var(--secondary);
        }

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-block: 2rem;
    gap: 2rem;
    /*background: var(--theme-color);*/
    background-image: linear-gradient(to top, #dad4ec 0%, #dad4ec 1%, #f3e7e9 100%);
    border-radius: 20px;
    padding: 50px 0px;
}

img {
    max-width: 100%;
    object-fit: cover;
}

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: clamp(20rem, calc(20rem + 2vw), 22rem);
    overflow: hidden;
    box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.5);
    border-radius: 1em;
    background: #fff;
    border: 2px solid transparent; /* Initial border setup */
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out, border-color .7s ease-in-out;
}

    /* Hover effect for smooth scaling and shadow */
    .card:hover {
        transform: translateY(-10px);
        transform: scale(1.03);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
        border-color: var(--theme-color);
    }

    /* Active (click) effect for a subtle pressed look */
    .card:active {
        transform: scale(1.03);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        border-color: var(--theme-color);
    }



.card__body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}


.tag {
    border-radius: 1em;
    font-size: .75rem;
    background: var(--theme-color);
    color: #fff;
}

.card__body h4 {
    font-size: 1.5rem;
    text-transform: capitalize;
}

.card__footer {
    display: flex;
    padding: 1rem;
    margin-top: auto;
}

.user {
    display: flex;
    gap: .5rem;
}

.user__image {
    border-radius: 50%;
}

.user__info > small {
    color: #666;
}

.events {
    text-align: center;
}

    .events .titletext {
        text-align: center;
        font-size: 2em;
        padding-bottom: 40px;
    }

        .events .titletext span {
            color: var(--theme-color);
        }

.jobs {
    text-align: center;
}

    .jobs .titletext {
        text-align: center;
        font-size: 2em;
        padding-bottom: 40px;
    }

        .jobs .titletext span {
            color: var(--theme-color);
        }

.register {
    text-align: center;
    border-top: 1px solid var(--border);
}

    .register .titletext {
        text-align: center;
        font-size: 2em;
        padding-bottom: 40px;
    }

        .register .titletext span {
            color: var(--theme-color);
        }

.form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
    /*background: var(--theme-color);*/
    background-image: linear-gradient(to top, #dad4ec 0%, #dad4ec 1%, #f3e7e9 100%);
    padding: 30px;
    width: 700px;
    margin: auto;
    border-radius: 20px;
    height: auto;
}

    .form .formimg img {
        width: 350px;
        border-radius: 25px;
    }

    .form .formcontent {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 10px;
    }

        .form .formcontent input {
            border: none;
            padding: 10px 30px;
            border-radius: 20px;
        }

.register .form .btn {
    margin-top: 10px;
    border: none;
    padding: 10px 30px;
    background: #fff;
    border-radius: 25px;
    cursor: pointer;
    transition: .5s;
}

@media(max-width: 911px) {
    .header {
        display: none;
    }

    .top .search .hamburger {
        display: block;
    }

    .register .form {
        margin: 0 0;
    }

    swiper-slide .imgbx img {
        height: 100vh;
    }

    .top .search {
        display: flex;
        justify-content: space-between;
    }

    .top {
        position: sticky;
        top: 0;
        /*z-index: 2;*/
        background: #fff;
        width: 100%;
    }

    .banner {
        margin: 0px 0px;
    }

    .form {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.bigName {
    font-size: calc(40px + (70 - 40) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 600;
    line-height: 1.1;
    text-transform: capitalize;
}

.banner {
    z-index: -1; /* Lower z-index */
}

.swiper-button-next {
    z-index: 1 !important;
}

.swiper-button-prev {
    z-index: 1 !important;
}
/*START Icons */
.tabler--thumb-up {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 11v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1za4 4 0 0 0 4-4V6a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1-2 2h-7a3 3 0 0 1-3-3'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.tabler--thumb-down {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 13V5a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1za4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2-2l-1-5a2 3 0 0 0-2-2h-7a3 3 0 0 0-3 3'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
/*END Icons */



/*START Custom Classes */
.icon-size {
    width: 30px;
    height: 30px;
}

@media (max-width: 576px) {
    /* On mobile devices (small screens) */
    .icon-size {
        width: 16px;
        height: 16px;
    }
}

/* Custom class for the link */
.fLinkToClick {
    font-size: 16px; /* Default font size */
    transition: color 0.3s ease, font-size 0.3s ease; /* Smooth transition */
    cursor: default; /* Default cursor */
}

    /* Change color and size on hover */
    .fLinkToClick:hover {
        font-size: 18px; /* Increase size on hover */
        cursor: pointer; /* Change cursor to pointer on hover */
    }

.article-text p {
    margin-bottom: 1rem; /* Adjust as needed */
    line-height: 2; /* Increase line spacing if needed */
}

.article-text ul, .article-text ol {
    padding-left: 2rem; /* Adjust for proper indentation */
    margin-bottom: 5rem;
    list-style-position: inside; /* Ensures bullets/numbers are inside the padding */
}

.article-text li {
    margin-bottom: 0.5rem; /* Space between list items */
    line-height: 1.6; /* Adjust line height for readability */
}